Angular パンくずリストコンポーネント | ng-hub-ui-breadcrumbs
Router 連携、カスタムテンプレート、RTL 対応、柔軟なスタイルトークンを備えた Angular パンくずリストコンポーネント。
API リファレンス
breadcrumbs の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。
インプット
1 個のインプットで breadcrumbs を調整。通常の Angular @Input と同じようにバインドできます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
breadcrumbs$ | Observable<BreadcrumbItem[]> | — | ルートデータから自動生成されるパンくず項目の Observable ストリーム。 |
アウトプット
アウトプットはまだドキュメント化されていません。
テンプレート
自分好みに — 1 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。
| 名前 | 説明 | サンプル |
|---|---|---|
hubBreadcrumbItem | 個々のパンくず項目をレンダリングするためのカスタムテンプレート | <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
@if (!isLast) {
<a [routerLink]="item.url" class="breadcrumb-link">{{ item.label }}</a>
} @else {
<span class="breadcrumb-current">{{ item.label }}</span>
}
</ng-template> |
CSS 変数
17 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。
区切り文字とレイアウト
区切り文字の外観と全体的なレイアウト構造を制御します
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-breadcrumb-divider | '/' | string | breadcrumbs 項目間の区切りとして使用される文字または記号 '>''→''•''|' |
--hub-breadcrumb-divider-color | #6c757d | color | 区切り文字の色 #666666var(--bs-secondary)rgba(0,0,0,0.5) |
--hub-breadcrumb-padding-x | 0 | length | breadcrumbs コンポーネント全体の水平パディング 0.5rem1rem0.75rem |
--hub-breadcrumb-padding-y | 0 | length | breadcrumbs コンポーネント全体の垂直パディング 0.25rem0.5rem0.75rem |
色と背景
breadcrumbs 要素の色と背景の外観をカスタマイズします
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-breadcrumb-bg | transparent | color | breadcrumbs コンテナの背景色 #f8f9fa#ffffffvar(--bs-light) |
--hub-breadcrumb-item-color | #6c757d | color | 非アクティブな breadcrumbs 項目（リンク）のテキスト色 #495057var(--bs-secondary)#666666 |
--hub-breadcrumb-item-active-color | #212529 | color | アクティブな（現在の）breadcrumbs 項目のテキスト色 #000000var(--bs-dark)#333333 |
--hub-breadcrumb-item-hover-color | #0d6efd | color | breadcrumbs リンクにホバーした際のテキスト色 #0056b3var(--bs-primary)#007bff |
間隔とタイポグラフィ
項目間の間隔とタイポグラフィ設定を制御します
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-breadcrumb-item-padding-x | 0.5rem | length | 個々の breadcrumbs 項目の水平パディング 0.25rem0.75rem1rem |
--hub-breadcrumb-item-padding-y | 0 | length | 個々の breadcrumbs 項目の垂直パディング 0.25rem0.5rem0.75rem |
--hub-breadcrumb-font-size | 1rem | length | breadcrumbs テキストのフォントサイズ 0.875rem1.125rem1.25rem |
--hub-breadcrumb-font-weight | 400 | string | breadcrumbs テキストのフォントウェイト 500600bold |
境界線と視覚効果
境界線、半径、視覚的な強調を設定します
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-breadcrumb-border-radius | 0 | length | breadcrumbs コンテナの境界半径 0.25rem0.375rem0.5rem |
--hub-breadcrumb-border | none | border | breadcrumbs コンテナ周囲の境界線 1px solid #dee2e62px solid #e9ecefnone |
--hub-breadcrumb-margin-bottom | 1rem | length | breadcrumbs コンポーネントの下マージン 0.5rem1.5rem2rem |
RTL サポート
右から左へのレイアウトをサポートするための変数
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-breadcrumb-rtl-divider | '' | string | RTL レイアウトで使用される区切り文字（方向が反転） '<''←''' |
--hub-breadcrumb-direction | ltr | string | breadcrumbs レイアウトのテキスト方向 rtlltr |
スタイリングとテーマ設定
CSS 変数とテーマ設定
区切り文字、色、間隔、視覚的な外観に対する CSS カスタムプロパティを使用した完全なテーマ制御。
サンプル:
CSS Variables Customization
Customize breadcrumbs appearance using CSS custom properties for complete theming
Breadcrumbs - CSS Variables Styling
Customization of dividers, colors, and spacing through CSS variables
Custom Divider
Custom Colors (via CSS class)
Spacing & Radius
コード
コード
Import:
Template:
Component: