Angular ナビゲーションメニューコンポーネント | ng-hub-ui-nav
ドロップダウン、ドリルダウンパネル、レスポンシブな折りたたみ、Router 連携、CSS 変数テーマを備えた Angular ナビゲーションコンポーネント。
API リファレンス
nav の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。
インプット
4 個のインプットで nav を調整。通常の Angular @Input と同じようにバインドできます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
items必須 | HubNavItem[] | — | レンダリングするナビゲーション項目の配列。各項目はその type（link、dropdown、header、separator、custom）、label、route、icon、badge、children などを定義します。 |
config | Partial<HubNavConfig> | {} | グローバルなデフォルトとマージされる部分的な設定の上書き。向き、ドロップダウンのトリガー、折りたたみモード、ブレークポイント、位置などを制御します。 |
navClass | string | '' | nav コンテナ要素に適用される追加の CSS クラス。 |
itemTemplate | TemplateRef<HubNavItemTemplateContext> | null | null | 入力バインディングによって nav 項目をレンダリングするための任意のカスタムテンプレート。hubNavItemTemplate ディレクティブはこの入力より優先されます。 |
アウトプット
nav の動作に反応 — ロジックを接続できる 5 個のイベント。
| 名前 | 型 | 説明 |
|---|---|---|
itemClick | OutputEmitterRef<HubNavItem> | link 項目がクリックされたときに発行されます。クリックされた HubNavItem を提供します。 |
dropdownOpen | OutputEmitterRef<HubNavItem> | ドロップダウン項目が開かれたときに発行されます。 |
dropdownClose | OutputEmitterRef<HubNavItem> | ドロップダウン項目が閉じられたときに発行されます。 |
mobileToggle | OutputEmitterRef<boolean> | モバイルパネルがトグルされたときに発行されます。開いているときは true、閉じているときは false を提供します。 |
panelChange | OutputEmitterRef<HubNavPanelEvent> | パネルが開かれた、閉じられた、ドリルダウンされた、または戻る操作が行われたときに発行されます。項目、パネルのインデックス、アクションタイプを提供します。 |
テンプレート
自分好みに — 3 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。
| 名前 | 説明 | サンプル |
|---|---|---|
hubNavStart | start スロットにカスタムコンテンツを投影します。水平方向: 視覚的な開始位置（LTR では左、RTL では右）。垂直方向: 主要カラムの上部。 | <hub-nav [items]="items">
<ng-template hubNavStart let-collapsed="collapsed">
<img src="logo.svg" alt="Brand" />
@if (!collapsed) { <span>App Name</span> }
</ng-template>
</hub-nav> |
hubNavEnd | end スロットにカスタムコンテンツを投影します。水平方向: 視覚的な終了位置（LTR では右、RTL では左）。垂直方向: 主要カラムの下部。 | <hub-nav [items]="items">
<ng-template hubNavEnd>
<button type="button">Sign out</button>
</ng-template>
</hub-nav> |
hubNavItemTemplate | デフォルトの項目レンダリングをカスタムテンプレートで上書きします。$implicit（item）、active、expanded、depth の各プロパティを持つ HubNavItemTemplateContext を受け取ります。 | <hub-nav [items]="items">
<ng-template hubNavItemTemplate let-item let-active="active">
<span [class.fw-bold]="active">{{ item.label }}</span>
@if (item.badge) { <span class="badge">{{ item.badge }}</span> }
</ng-template>
</hub-nav> |
CSS 変数
42 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。
レイアウト
nav 全体の寸法、パディング、間隔を制御します。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-nav-height | 3.5rem | length | ナビゲーションバーの高さ。 3rem4remauto |
--hub-nav-padding-x | 1rem | length | nav コンテナの水平パディング。 0.5rem1.5rem2rem |
--hub-nav-padding-y | 0.5rem | length | nav コンテナの垂直パディング。 0.25rem0.75rem1rem |
--hub-nav-gap | 0.25rem | length | nav 項目間の間隔。 00.5rem1rem |
色と背景
nav のカラースキームと境界線を制御します。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-nav-bg | #fff | color | ナビゲーションバーの背景色。 #f8f9fatransparentvar(--hub-sys-surface-page) |
--hub-nav-color | #212529 | color | ナビゲーションの基本テキスト色。 #333#fffvar(--hub-sys-text-primary) |
--hub-nav-border-color | #dee2e6 | color | ナビゲーションバーの境界線の色。 transparent#cccvar(--hub-sys-border-color-default) |
項目
すべての状態にわたる個々のナビゲーション項目のスタイリング。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-nav-item-padding-x | 1rem | length | nav 項目内の水平パディング。 0.5rem1.25rem1.5rem |
--hub-nav-item-padding-y | 0.5rem | length | nav 項目内の垂直パディング。 0.25rem0.75rem1rem |
--hub-nav-item-color | #212529 | color | nav 項目のテキスト色。 #495057#fffinherit |
--hub-nav-item-border-radius | 0.25rem | length | nav 項目の境界半径。 00.375rem50rem |
--hub-nav-item-hover-bg | rgba(0, 0, 0, 0.04) | color | ホバー時の背景色。 #e9ecefrgba(255, 255, 255, 0.1)transparent |
--hub-nav-item-hover-color | #0d6efd | color | ホバー時のテキスト色。 #0a58ca#fffvar(--hub-sys-color-primary) |
--hub-nav-item-active-bg | #0d6efd | color | 項目がアクティブな際の背景色。 #0a58catransparentvar(--hub-sys-color-primary) |
--hub-nav-item-active-color | #fff | color | 項目がアクティブな際のテキスト色。 #0d6efd#212529var(--hub-sys-text-inverse) |
--hub-nav-item-disabled-color | #6c757d | color | 無効な項目のテキスト色。 #adb5bdvar(--hub-sys-text-muted) |
--hub-nav-item-disabled-opacity | 0.65 | number | 無効な項目の不透明度。 0.50.41 |
ドロップダウン
ドロップダウンパネルの外観と配置をカスタマイズします。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-nav-dropdown-bg | #fff | color | ドロップダウンパネルの背景色。 #f8f9fa#343a40var(--hub-sys-surface-elevated) |
--hub-nav-dropdown-border-color | #dee2e6 | color | ドロップダウンパネルの境界線の色。 transparent#ccc |
--hub-nav-dropdown-border-radius | 0.375rem | length | ドロップダウンパネルの境界半径。 00.25rem0.5rem |
--hub-nav-dropdown-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | ドロップダウンパネルのボックスシャドウ。 none0 4px 8px rgba(0,0,0,0.1)0 1rem 3rem rgba(0,0,0,0.175) |
--hub-nav-dropdown-min-width | 12rem | length | ドロップダウンパネルの最小幅。 10rem15rem200px |
ブランド
ブランドスロット領域のスタイリング。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-nav-brand-font-size | 1.25rem | length | ブランドテキストのフォントサイズ。 1rem1.5rem2rem |
--hub-nav-brand-font-weight | 600 | number | ブランドテキストのフォントウェイト。 400700800 |
--hub-nav-brand-color | #212529 | color | ブランドのテキスト色。 #fff#0d6efdinherit |
モバイルパネル
レスポンシブなモバイルナビゲーションパネルの設定。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-nav-mobile-bg | #fff | color | モバイルパネルの背景色。 #f8f9fa#212529var(--hub-sys-surface-page) |
--hub-nav-mobile-width | 18rem | length | オフキャンバスのモバイルパネルの幅。 15rem20rem80vw |
--hub-nav-mobile-backdrop-bg | rgba(0, 0, 0, 0.5) | color | モバイルパネルの背後の背景色。 rgba(0, 0, 0, 0.3)rgba(0, 0, 0, 0.75)transparent |
--hub-nav-mobile-transition | 300ms ease | transition | モバイルパネルの開閉アニメーションのトランジションタイミング。 200ms ease-in-out400ms ease150ms linear |
accordion とアイコン
垂直 accordion のインデントとアイコンのサイズ設定。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-nav-accordion-indent | 1rem | length | 垂直 accordion モードにおけるネストレベルごとの左インデント。 0.5rem1.5rem2rem |
--hub-nav-icon-size | 1.25rem | length | ナビゲーション項目アイコンのサイズ。 1rem1.5rem2rem |
--hub-nav-icon-gap | 0.5rem | length | アイコンとラベルテキストの間隔。 0.25rem0.75rem1rem |
パネル
スタックされたパネルのドリルダウンナビゲーションのスタイリング。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-nav-panel-width | 16rem | length | 各パネルのデフォルト幅。 14rem18rem20rem |
--hub-nav-panel-zindex | 100 | number | パネルの重なり順（ドロップダウンの z-index より低くする必要があります）。 50100200 |
--hub-nav-panel-bg | var(--hub-sys-surface-page, #fff) | color | パネルの背景色。 #f8f9fa#fffvar(--hub-sys-surface-elevated) |
--hub-nav-panel-color | var(--hub-sys-text-primary, #212529) | color | パネル内のテキスト色。 #333#fffinherit |
--hub-nav-panel-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | パネル間の境界線の色。 transparent#ccc |
--hub-nav-panel-shadow | inset 4px 0 8px -4px rgba(0, 0, 0, 0.1) | shadow | パネルのボックスシャドウ。 none2px 0 4px rgba(0,0,0,0.05) |
--hub-nav-panel-header-height | 3rem | length | パネルヘッダーの高さ。 2.5rem3.5rem4rem |
--hub-nav-panel-header-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | パネルヘッダーの背景色。 #fff#e9eceftransparent |
--hub-nav-panel-back-color | var(--hub-sys-text-secondary, #6c757d) | color | パネルヘッダー内の戻るボタンの色。 #212529#0d6efdinherit |
--hub-nav-panel-back-hover-bg | rgba(0, 0, 0, 0.04) | color | パネルヘッダーボタンのホバー背景。 #e9ecefrgba(0,0,0,0.08) |
スタイリングとテーマ設定
スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。