Angular タブ・ピル・アコーディオンコンポーネント | ng-hub-ui-panels
タブ、ピル、アコーディオンとしてレンダリングできる Angular コンテンツパネルコンポーネント。Router、リアクティブフォーム、キーボード操作、CSS 変数に対応します。
API リファレンス
panels の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。
インプット
20 個のインプットで panels を調整。通常の Angular @Input と同じようにバインドできます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
type | 'tabs' | 'pills' | 'accordion' | 'card' | 'tabs' | コンテナの表示形式: 下線付きタブ、角丸ピル、または積み重なったアコーディオンパネル。 |
vertical | boolean | false | ヘッダーストリップをコンテンツの横に垂直に積み重ねます（tabs／pills ビュー）。 |
justified | boolean | false | ヘッダーを引き伸ばし、利用可能な幅を均等に分け合います。 |
scrollable | boolean | false | ヘッダーストリップがあふれたときに、前後へのスクロールボタンを追加します。 |
isKeysAllowed | boolean | true | キーボードナビゲーションを有効にします（矢印 / Home / End / Delete）。 |
multiple | boolean | false | 複数のパネルを同時にアクティブにできます。アコーディオンビューではすべてが展開されます。tabs/pills ビューでは、各アクティブヘッダーが表示パネルブロックを開始し、それに続く非アクティブヘッダーは、次のアクティブヘッダーが新しいブロックを開始するまで、そのブロックの上にグループ化されたまま残ります。フォーム値は配列になります。 |
flush | boolean | false | アコーディオンビュー: 外側のボーダーや角丸のない端から端までのパネル。 |
bindValue | string | undefined | 発行されるフォーム値を取得するために各パネルの値に適用されるドット記法のパス（例: 'meta.key'）。 |
compareWith | (a: unknown, b: unknown) => boolean | (a, b) => a === b | フォーム値とパネル値を照合するために使用される等価判定。 |
heading | string | undefined | hub-panel: プレーンテキストのヘッダー。hubPanelHeading テンプレートが指定されている場合は無視されます。 |
appearance | 'card' | 'alert' | 'card' | hub-panel: 単独パネルの外観 — 'card'（既定）またはセマンティックな 'alert'。tabs/pills/accordion 表示では無視されます。 |
variant | 'primary' | 'success' | 'danger' | 'warning' | 'info' | undefined | hub-panel: アラートのセマンティックカラー（'primary' | 'success' | 'danger' | 'warning' | 'info'）。中立的なアラートでは省略します。 |
value | unknown | id | hub-panel: コンテナがフォームコントロールとして使用されるときに提供される値。 |
active | boolean (model) | false | hub-panel: 双方向バインドされた active／expanded 状態。 |
disabled | boolean | false | hub-panel: パネルがアクティブ化されるのを防ぎます。 |
removable | boolean | false | hub-panel: ✕ のアフォーダンスを表示し、Delete キーでの削除を有効にします。 |
routerLink | string | string[] | undefined | hub-panel: パネルを <router-outlet> に支えられたルーティングパネルに変換します。 |
queryParams | Params | undefined | hub-panel: routerLink へのナビゲーション時に付加されるクエリパラメータ。 |
pathMatch | 'route' | 'full' | 'route' | hub-panel: ルーティングパネルをアクティブとしてマークするために使用される URL の比較。 |
customClass | string | undefined | hub-panel: nav 項目とペインの両方に適用される追加の CSS クラス。 |
アウトプット
panels の動作に反応 — ロジックを接続できる 4 個のイベント。
| 名前 | 型 | 説明 |
|---|---|---|
panelChange | EventEmitter<PanelChangeEvent> | hub-panels: ユーザーが別のパネルをアクティブ化（オープン）したときに発行されます。{ current, prev } を提供します。 |
selectPanel | EventEmitter<PanelComponent> | hub-panel: パネルがアクティブになったときに発行されます。 |
deselectPanel | EventEmitter<PanelComponent> | hub-panel: パネルがアクティブでなくなったときに発行されます。 |
removed | EventEmitter<PanelComponent> | hub-panel: パネルが ✕ ボタンまたは Delete キーで削除されたときに発行されます。 |
テンプレート
自分好みに — 3 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。
| 名前 | 説明 | サンプル |
|---|---|---|
hubPanelHeading | hub-panel 内の <ng-template> を、そのパネルのカスタムヘッダー（tabs/pills ではストリップリンク、アコーディオンでは開閉ボタン）として指定し、プレーンテキストの heading 入力を置き換えます。 | <hub-panel>
<ng-template hubPanelHeading>
<i class="fa-solid fa-gear"></i> Settings <span class="badge text-bg-primary">3</span>
</ng-template>
Panel content
</hub-panel> |
hubPanelHeader / hubPanelFooter | hub-panel 内の要素をパネルコンテンツのヘッダー/フッター帯として指定します。すべてのビュー（tabs、pills、accordion、card）で表示され、hubPanelHeading とは異なります。 | <hub-panel>
<div hubPanelHeader>Card title</div>
Card content
<div hubPanelFooter>Actions</div>
</hub-panel> |
type="card" | 装飾のないカード表示：ナビゲーション帯がなく、すべてのパネルが常に表示されます。hub-panel は hub-panels の外で単独でも使用でき、その場合はカードとして表示されます。 | <hub-panels type="card">
<hub-panel>…</hub-panel>
<hub-panel>…</hub-panel>
</hub-panels> |
CSS 変数
36 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。
レイアウトと境界線
コンテナの全体構造：ストリップの方向、コンテンツのパディング、共有境界線トークン。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-panels-flex-direction | row | string | コンテンツに対するヘッダーストリップの方向。 rowrow-reverse |
--hub-panels-border-width | 1px | length | タブストリップとアクティブタブで使用される境界線の幅。 02px |
--hub-panels-border-color | #dee2e6 | color | タブストリップとコンテンツの境界線の色。 #ced4davar(--bs-border-color) |
--hub-panels-border-radius | 0.375rem | length | タブヘッダーとコンテンツの角の半径。 00.5rem |
--hub-panels-content-bg | #fff | color | コンテンツ領域の背景。 transparent#f8f9fa |
--hub-panels-header-bg | var(--hub-panels-content-bg) | color | 非アクティブなヘッダーとスペーサーゾーンの背後にあるタブ/ピルストリップ領域の背景。 #f8f9favar(--bs-tertiary-bg) |
--hub-panels-content-box-shadow | none | shadow | コンテンツ領域のラッパーに適用されるボックスシャドウ。 none0 0.5rem 1rem rgba(0,0,0,.08) |
--hub-panels-content-padding-x | 1rem | length | コンテンツ領域の水平パディング。 0.75rem1.5rem |
--hub-panels-content-padding-y | 1rem | length | コンテンツ領域の垂直パディング。 0.75rem1.5rem |
タブヘッダー
個々のタブ/ピルヘッダーのタイポグラフィ、間隔、色の状態。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-panels-tab-font-weight | 500 | number | ヘッダーラベルのフォントウェイト。 400600 |
--hub-panels-tab-padding-x | 1rem | length | ヘッダー内の水平パディング。 0.75rem1.25rem |
--hub-panels-tab-padding-y | 0.5rem | length | ヘッダー内の垂直パディング。 0.375rem0.75rem |
--hub-panels-tab-color | #212529 | color | 非アクティブなヘッダーのテキスト色。 #495057var(--bs-body-color) |
--hub-panels-tab-bg | transparent | color | 非アクティブなヘッダーの背景。--hub-panels-header-bg を透過させるには透明のままにします。 transparent#f8f9fa |
--hub-panels-tab-color-active | #0d6efd | color | アクティブなヘッダーのテキスト色。 var(--bs-primary)#0b5ed7 |
--hub-panels-tab-bg-active | #fff | color | アクティブなヘッダーの背景。デフォルトはコンテンツ表面で、アクティブタブがパネルと一体化します。 var(--bs-primary)var(--hub-panels-content-bg) |
--hub-panels-tab-bg-hover | #f8f9fa | color | ホバー時のヘッダーの背景。 #e9eceftransparent |
--hub-panels-tab-border-color-active | #0d6efd | color | アクティブタブの境界線の色。 var(--bs-primary)#0b5ed7 |
--hub-panels-tab-active-shadow | 0 -0.25rem 0.5rem rgba(0, 0, 0, 0.06) | shadow | 水平ボックスタブビューでアクティブタブが使用する立体シャドウ。 none0 -0.25rem 0.75rem rgba(0,0,0,.12) |
--hub-panels-tab-active-shadow-vertical | -0.25rem 0 0.5rem rgba(0, 0, 0, 0.06) | shadow | 垂直ボックスタブビューでアクティブタブが使用する立体シャドウ。 none-0.25rem 0 0.75rem rgba(0,0,0,.12) |
--hub-panels-tab-focus-ring-color | rgba(13, 110, 253, 0.25) | color | キーボードフォーカスのフォーカスリングの色。 rgba(13,110,253,.4) |
ピル
ピル表示に固有のトークン。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-panels-pill-border-radius | 50rem | length | ピルヘッダーの角の半径。 0.5rem999px |
--hub-panels-pill-bg-active | #0d6efd | color | アクティブなピルの背景。 var(--bs-primary)#198754 |
--hub-panels-pill-color-active | #fff | color | アクティブなピルのテキスト色。 #fff#000 |
--hub-panels-pill-gap | 0.5rem | length | ピルヘッダー間の間隔。 0.25rem0.75rem |
--hub-panels-pill-content-border-width | 0 | length | ピルコンテンツカードの境界線の幅。境界線付きのペインに戻すには共有境界線の幅に設定します。 01px |
--hub-panels-nav-content-gap | 1rem | length | ピルストリップとコンテンツカードの間隔（垂直時はインライン間隔）。 0.75rem1.5rem |
複数選択
タブ/ピルスタイルが複数のアクティブヘッダーを同時に許可する場合の、ブロックベースの複数ビューのレイアウト。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-panels-pane-min-width | 16rem | length | コンテンツ領域が水平スクロールする前の、開いている各ペインの最小幅。 12rem20rem |
--hub-panels-pane-min-height | 8rem | length | 垂直レイアウトにおける開いている各ペインの最小高さ。 6rem12rem |
--hub-panels-pane-gap | 0 | length | 複数のパネルブロック間の間隔。 01rem |
accordion ビュー
accordion 表示用のトークン。各トークンはテーマ互換性のために対応する --hub-accordion-* 変数にフォールバックします。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-panels-accordion-active-color | #0c63e4 | color | 展開された accordion ヘッダーのテキスト色。 var(--bs-primary) |
--hub-panels-accordion-active-bg | #e7f1ff | color | 展開された accordion ヘッダーの背景。 var(--bs-primary-bg-subtle) |
--hub-panels-accordion-btn-padding-x | 1.25rem | length | 開示ボタンの水平パディング。 1rem1.5rem |
--hub-panels-accordion-btn-padding-y | 1rem | length | 開示ボタンの垂直パディング。 0.75rem1.25rem |
--hub-panels-accordion-btn-icon-transform | rotate(-180deg) | string | 展開時にシェブロンへ適用される transform。 rotate(180deg)scaleY(-1) |
--hub-panels-accordion-collapse-transition-duration | 0.25s | transition | 展開/折りたたみアニメーションの継続時間。 0.2s0.35s |
スタイリングとテーマ設定
スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。