API リファレンス

panels の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

40 個のインプットで 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 では右端になります。アプリ全体の既定値は HubPanelsConfig.togglePosition で設定します。
`variant`	`HubPanelVariant \| string`	`undefined`	hub-panels: ナビゲーションストリップのセマンティックアクセント。アクティブ／ホバー中のタブ、アクティブなピル、アクティブなアコーディオンヘッダーがこれに従います。組み込み値（'primary' \| 'success' \| 'danger' \| 'warning' \| 'info'）はデザインシステムの色調を使いますが、任意の文字列も指定できます。ストリップはアプリケーションの --hub-sys-color-<variant> を読み取ります。既定は primary です。
`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`	`HubPanelVariant \| string`	`undefined`	hub-panel: パネルのセマンティックアクセント。alert を色付けし、card 全体を淡く染めます（data-variant として反映）。組み込み値（'primary' \| 'success' \| 'danger' \| 'warning' \| 'info'）はデザインシステムの色調を使いますが、任意の文字列も指定できます。パネルはアプリケーションの --hub-sys-color-<variant> を読み取ります。中立的なパネルでは省略します。
`fill`	`boolean`	`false`	card パネル専用：親の高さいっぱいに広がり本文をスクロールさせるため、内側の flex:1/min-height:0 領域（例：タブストリップ + スクロールペイン）が制約されます。親は flex の縦方向カラムである必要があります。
`standalone`	`boolean (static attribute)`	`false`	card パネル専用の静的属性：同じテンプレート内の祖先 tabs/pills/accordion グループから独立した <hub-panel> を除外し、隠れたタブとして取り込まれずに通常の card として描画されるようにします。
`id`	`string`	`'hub-panel-<n>'`	hub-panel: タブとそのパネル（またはアコーディオンのヘッダーとその領域）を結ぶ ARIA 対応付けに使う id。hub-panel-<n> として自動生成されます。ディープリンクや独自の aria-controls のために安定した id が必要な場合に指定します。
`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> ストリップはタブを横一列に並べる代わりに縦方向に積み重ねます。
`mode`	`HubSidePanelMode`	`'side'`	<hub-side-panel>：'side' はパネルをドッキングし、場所を空けるためにコンテンツを狭めます。'over' はバックドロップ、スクロールロック、フォーカストラップなしでコンテンツの端に重ねて表示します。
`position`	`HubSidePanelPosition`	`'end'`	<hub-side-panel>：パネルを配置するコンテナの論理的なインライン方向の端。'end' は LTR では右端、dir="rtl" では左端です。
`open`	`boolean (model)`	`false`	<hub-side-panel>：双方向の開閉状態。閉じても投影されたコンテンツは破棄されずに非表示になるだけなので、中のチャットやフォームは状態を保持します。
`closeOnEscape`	`boolean`	`true`	<hub-side-panel>：パネル内で Escape を押したときに閉じるかどうか。ページ上で押された Escape は奪わず、すでにキーを処理したコントロールがある場合はパネルを開いたままにします。
`breakpoint`	`number`	`768`	<hub-side-panel>：コンテナのインラインサイズ（px）がこの値未満のとき、side パネルを over として描画します。狭い画面でドッキングするとコンテンツを押しつぶすためです。0 にするとどの幅でもドッキングしたままです。
`autoFocus`	`boolean`	`false`	<hub-side-panel>：開いたときにフォーカスをパネル内へ移すかどうか。最初の [autofocus] 要素、なければ最初のフォーカス可能要素、なければパネル自体に移します。既定はオフです。
`role`	`HubSidePanelRole`	`'complementary'`	<hub-side-panel>：ランドマークロール。ページのメインコンテンツの横では 'complementary'、その内部に置く場合は 'region' を使います。
`ariaLabel`	`string`	`undefined`	<hub-side-panel>：ランドマークのアクセシブルな名前。これか ariaLabelledBy を指定してください。
`ariaLabelledBy`	`string`	`undefined`	<hub-side-panel>：ランドマークに名前を付ける要素の id。通常はヘッダースロット内の見出しです。

アウトプット

panels の動作に反応 — ロジックを接続できる 7 個のイベント。

名前	型	説明
`panelChange`	`OutputEmitterRef<PanelChangeEvent>`	hub-panels: ユーザーが別のパネルをアクティブ化（オープン）したときに発行されます。{ current, prev } を提供します。
`selectPanel`	`OutputEmitterRef<HubPanelComponent>`	hub-panel: パネルがアクティブになったときに発行されます。
`deselectPanel`	`OutputEmitterRef<HubPanelComponent>`	hub-panel: パネルがアクティブでなくなったときに発行されます。
`removed`	`OutputEmitterRef<HubPanelComponent>`	hub-panel: パネルが ✕ ボタンまたは Delete キーで削除されたときに発行されます。
`activeChange`	`OutputEmitterRef<boolean>`	hub-panel: 双方向 active モデルの change 側。パネルの新しい active／expanded 状態とともに発行されます。
`activeChange`	`OutputEmitterRef<unknown>`	選択値が変化するたびに <hub-tab-nav> から発行され（双方向 active モデルの change 側）、新たに選択された項目の value を伴います。
`openChange`	`OutputEmitterRef<boolean>`	<hub-side-panel>：双方向 open モデルの変更側。誰が変更したか（バインディング、Escape、toggle()、close()）に関係なく新しい状態で発行されます。

メソッド

panels をコードから操作 — プログラム操作のための 6 個のメソッドを備えています。

名前	シグネチャ	戻り値	説明
`HubPanelsComponent.selectPanel`	`selectPanel(panel: HubPanelComponent): void`	—	ユーザーのクリックと同じようにパネルを有効化します。アクティブにし、ルーティングされたパネルなら遷移し、panelChange を発行します。無効なパネルでは何もしません。
`HubPanelsComponent.togglePanel`	`togglePanel(panel: HubPanelComponent): void`	—	アコーディオン表示でパネルを開閉します。multiple を尊重し、multiple が無効なら1つ開くと他は閉じます。
`HubPanelsComponent.removePanel`	`removePanel(panel: HubPanelComponent, options?: { reselect?: boolean; emit?: boolean }): void`	—	グループからパネルを削除します。reselect は別のパネルが代わりに選択されるか、emit は削除を panelChange で通知するかを決めます。
`HubPanelsComponent.removePanelAndRefocus`	`removePanelAndRefocus(panel: HubPanelComponent): void`	—	パネルを削除し、残っている最も近いヘッダーへキーボードフォーカスを渡します。削除でフォーカスが body に落ちることはありません。✕ ボタンと Delete キーが呼び出すのはこのメソッドです。
`HubSidePanelComponent.toggle`	`toggle(force?: boolean): void`	—	パネルを開閉します。true または false を渡すと、反転ではなくその状態に強制します。
`HubSidePanelComponent.close`	`close(): void`	—	パネルを閉じます。フォーカスが内部にあった場合は、パネルを開いたときにフォーカスを持っていた要素に戻ります。

テンプレート

自分好みに — 3 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`hubPanelHeading`	hub-panel 内の <ng-template> を、そのパネルのカスタムヘッダー（tabs/pills ではストリップリンク、アコーディオンでは開閉ボタン）として指定し、プレーンテキストの heading 入力を置き換えます。	`<hub-panel> <ng-template hubPanelHeading> <i class="fa-solid fa-gear"></i> Settings <hub-badge color="primary" shape="rounded">3</hub-badge> </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>`