Angular タブ・ピル・アコーディオンコンポーネント | ng-hub-ui-panels
タブ、ピル、アコーディオンとしてレンダリングできる Angular コンテンツパネルコンポーネント。Router、リアクティブフォーム、キーボード操作、CSS 変数に対応します。
インタラクティブなサンプル
一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。
表示形式
1つのコンポーネントで3つのビューを利用できます：クラシックな下線付きタブ、角丸のピル、スタック式のアコーディオン開示パネル。単一の `type` 入力で切り替えられます。
基本的なタブ
ピル
accordion ビュー
カードとコンテンツスロット
hubPanelHeader / hubPanelFooter slots work in tabs, pills and accordion too. A single standalone <hub-panel> (no container):
hub-panel renders as a card by itself. カードスロット（variant / flush / fill）
Row 1 — the body scrolls; the header stays put.
Row 2 — the body scrolls; the header stays put.
Row 3 — the body scrolls; the header stays put.
Row 4 — the body scrolls; the header stays put.
Row 5 — the body scrolls; the header stays put.
Row 6 — the body scrolls; the header stays put.
Row 7 — the body scrolls; the header stays put.
Row 8 — the body scrolls; the header stays put.
Row 9 — the body scrolls; the header stays put.
Row 10 — the body scrolls; the header stays put.
Row 11 — the body scrolls; the header stays put.
Row 12 — the body scrolls; the header stays put.
Row 13 — the body scrolls; the header stays put.
Row 14 — the body scrolls; the header stays put.
Row 15 — the body scrolls; the header stays put.
Row 16 — the body scrolls; the header stays put.
Row 17 — the body scrolls; the header stays put.
Row 18 — the body scrolls; the header stays put.
Row 19 — the body scrolls; the header stays put.
Row 20 — the body scrolls; the header stays put.
セマンティックアラート
An alert can use the same header/footer slots as a card:
セマンティックストリップアクセント
ストリップレイアウト
あらゆるシェルに合わせてヘッダーストリップをレイアウトできます：コンテンツの横に縦に積み重ねる、ヘッダーを幅いっぱいに引き伸ばす、オーバーフローしたストリップをスクロール可能にする、といった配置が可能です。
垂直タブ
均等配置タブ
スクロール可能なタブ
パネル管理
個々のパネルを無効化したり、✕ アフォーダンスと Delete キーを使ってユーザーがその場でパネルを追加・削除したりできます。
無効なパネル
削除可能 & 動的なパネル
カスタムテンプレート
`hubPanelHeading` ディレクティブを介して、プレーンテキストのヘッダーを任意の Angular テンプレート（アイコン、バッジ、インタラクティブなコントロール）に置き換えられます。
カスタム見出しテンプレート
アコーディオンの行アクション
フォーム統合
ファーストクラスの ControlValueAccessor サポートにより、アクティブなパネルを Angular のリアクティブフォームおよびテンプレート駆動フォームにバインドできます。
リアクティブフォーム統合
複数選択
`multiple` を指定すると、複数のパネルを同時に開けます。アコーディオンビューではすべてが展開され、タブ／ピルビューでは各アクティブなヘッダーが独自の表示パネルを開始し、後続の非アクティブなヘッダーは、次のアクティブなヘッダーが新しいブロックを開始するまで、そのパネルの上にグループ化されたまま残ります。
複数選択
Click an inactive tab to split the layout into a new panel block. Click an active tab to merge that block back.
複数の垂直ヘッダー
Each active header starts a new row-like vertical block. The blocks stack top-to-bottom, and the whole layout scrolls horizontally only when one row needs more width.
Tabs
Pills
アコーディオンのオプション
アコーディオンビューは、複数のパネルを同時に展開する機能と、外側の装飾のないエッジトゥエッジの `flush` レイアウトをサポートします。
アコーディオンの複数表示 & フラッシュ
アクセシビリティ
完全なキーボードナビゲーション（矢印キー、Home、End、Delete）、roving tabindex、そして tablist とアコーディオンの開示パターンの両方に対する正しい ARIA ロールを備えています。
キーボードナビゲーション
Focus a tab, then use ← → Home End. Press Delete on a removable tab to close it.