Angular タブ・ピル・アコーディオンコンポーネント | ng-hub-ui-panels
タブ、ピル、アコーディオンとしてレンダリングできる Angular コンテンツパネルコンポーネント。Router、リアクティブフォーム、キーボード操作、CSS 変数に対応します。
API リファレンス
panels の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。
インプット
29 個のインプットで 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 | アコーディオンビュー: 外側のボーダーや角丸のない端から端までのパネル。 |
togglePosition | 'start' | 'end' | 'end' | <hub-panels>（アコーディオン表示）で、開閉シェブロンをヘッダー行のどちら側に置くか。"end"（既定）は見出しの後ろ、"start" は前に置きます。変わるのは視覚的な順序だけで DOM はそのまま、オフセットは論理プロパティなので "start" は LTR では左端、RTL では右端になります。アプリ全体の既定値は PanelsConfig.togglePosition で設定します。 |
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'）。中立的なアラートでは省略します。 |
fill | boolean | false | card パネル専用：親の高さいっぱいに広がり本文をスクロールさせるため、内側の flex:1/min-height:0 領域（例：タブストリップ + スクロールペイン）が制約されます。親は flex の縦方向カラムである必要があります。 |
standalone | boolean (static attribute) | false | card パネル専用の静的属性：同じテンプレート内の祖先 tabs/pills/accordion グループから独立した <hub-panel> を除外し、隠れたタブとして取り込まれずに通常の card として描画されるようにします。 |
value | unknown | id | hub-panel: コンテナがフォームコントロールとして使用されるときに提供される値。 |
active | boolean (model) | false | hub-panel: 双方向バインドされた active／expanded 状態。 |
disabled | boolean | false | hub-panel: パネルがアクティブ化されるのを防ぎます。 |
removable | boolean | false | hub-panel: ✕ のアフォーダンスを表示し、Delete キーでの削除を有効にします。 |
removeLabel | string | 'Remove panel' | hub-panel: ✕ 削除ボタンに読み上げられるアクセシブルな名前（aria-label）。コントロールをローカライズするには上書きします。 |
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 クラス。 |
items | HubTabNavItem[] | [] | <hub-tab-nav> の選択可能なタブを、レンダリング順に指定します。各項目は軽量な { value, label, disabled?, id? } 記述子です — ストリップ自体はコンテンツを保持しないため、value はタブが選択されたときに発行される値になります。 |
active | unknown (model) | undefined | <hub-tab-nav> の双方向バインドされた選択値です。タブを事前選択するために設定し、activeChange を通じて読み戻します。対応する項目は、その value がこれと等しい項目です。 |
appearance | 'tabs' | 'pills' | 'tabs' | <hub-tab-nav> ストリップの見た目：従来のアンダーライン付き 'tabs'（デフォルト）または角丸の 'pills'。 |
justified | boolean | false | true の場合、<hub-tab-nav> のタブが引き伸ばされ、利用可能な幅を均等に分け合います。 |
vertical | boolean | false | true の場合、<hub-tab-nav> ストリップはタブを横一列に並べる代わりに縦方向に積み重ねます。 |
アウトプット
panels の動作に反応 — ロジックを接続できる 5 個のイベント。
| 名前 | 型 | 説明 |
|---|---|---|
panelChange | EventEmitter<PanelChangeEvent> | hub-panels: ユーザーが別のパネルをアクティブ化（オープン）したときに発行されます。{ current, prev } を提供します。 |
selectPanel | EventEmitter<PanelComponent> | hub-panel: パネルがアクティブになったときに発行されます。 |
deselectPanel | EventEmitter<PanelComponent> | hub-panel: パネルがアクティブでなくなったときに発行されます。 |
removed | EventEmitter<PanelComponent> | hub-panel: パネルが ✕ ボタンまたは Delete キーで削除されたときに発行されます。 |
activeChange | EventEmitter<unknown> | 選択値が変化するたびに <hub-tab-nav> から発行され（双方向 active モデルの change 側）、新たに選択された項目の value を伴います。 |
テンプレート
自分好みに — 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> |