syncfusion-angular-breadcrumb

Syncfusion Angular Breadcrumb の実装

Breadcrumb コンポーネントは、ページやセクションの階層内でユーザーの現在位置を表示するナビゲーション補助機能を提供します。親階層へのクリック可能なリンクを備え、パンくずリストを視覚的に表示します。

このスキルを使用する場合

次のような場合にこのスキルを使用します。

• Angular アプリケーションにパンくずリストのナビゲーションを実装する
• ページ階層内でのユーザーの位置を表示する
• 親セクションへのナビゲーションを有効にする
• パンくずリストの項目にアイコンや視覚的な装飾を追加する
• 複数の表示モードを使ってオーバーフローに対応する
• テンプレートを使ってパンくずリストの外観をカスタマイズする
• パンくずリストの項目にデータバインディングを設定する

コンポーネントの概要

Syncfusion Angular Breadcrumb コンポーネント（ejs-breadcrumb）は、@syncfusion/ej2-angular-navigations パッケージの一部です。階層順に並んだリンクを表示し、各項目がナビゲーションの階層を表します。このコンポーネントは、次の機能をサポートします。

• 複数のデータバインディング方法：ディレクティブ、URL ベース、静的設定による項目指定
• アイコンのサポート：フォントアイコン、画像、SVG グラフィック
• ナビゲーションの制御：有効化／無効化、新しいタブで開く、最後の項目のナビゲーション
• オーバーフローへの対応：スペースに制約のあるレイアウト向けの 6 種類のモード
• テンプレートのカスタマイズ：項目テンプレートと区切り文字のカスタマイズ
• イベント処理：動的なカスタマイズのための beforeItemRender

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージの設定
• モジュールのインポートと enableRipple の設定
• 基本的なパンくずリストコンポーネントのレンダリング
• e-breadcrumb-items ディレクティブを使った項目の追加
• ナビゲーション機能の有効化と無効化
• CSS のインポートとテーマの適用

データバインディング

📄 参照： references/data-binding.md

• プロパティを指定したタグディレクティブとしての項目
• 現在の URL から項目を生成する
• パンくずリストの項目に対する静的 URL の設定
• url プロパティを使ったナビゲーションパスのバインド
• カスタマイズのための beforeItemRender イベント
• 生成された項目のテキストのカスタマイズ

アイコンと視覚的な装飾

📄 参照： references/icons-and-visuals.md

• iconCss プロパティを使ったフォントアイコンの追加
• パンくずリストの項目での画像アイコンの使用
• SVG アイコンの実装
• アイコンの配置（左寄せと右寄せ）
• テキストなしのアイコンのみの項目
• 最初の項目のみにアイコンを表示するパターン

ナビゲーションの設定

📄 参照： references/navigations.md

• 相対 URL の設定
• 絶対 URL の設定
• enableNavigation プロパティによる制御
• enableActiveItemNavigation による最後の項目のナビゲーション
• パンくずリストの項目を新しいタブまたはページで開く
• リンクのターゲットとナビゲーションの動作

API リファレンス

📄 参照： references/api-reference.md

• Breadcrumb のすべてのプロパティ、メソッド、イベント
• BreadcrumbItemModel の詳細
• BreadcrumbBeforeItemRenderEventArgs と BreadcrumbClickEventArgs
• destroy などのコンポーネントメソッド

オーバーフローへの対応

📄 参照： references/overflow-handling.md

• maxItems プロパティと overflowMode プロパティ
• コンパクト表示向けの Collapsed モード
• ドロップダウンサブメニューを備えた Menu モード
• 複数行レイアウト向けの Wrap モード
• 水平スクロールバーを備えた Scroll モード
• 表示状態を動的に制御する Hidden モード
• オーバーフローを処理しない None モード

テンプレートとカスタマイズ

📄 参照： references/templates-customization.md

• 項目をカスタムレンダリングする itemTemplate
• 区切り文字をカスタマイズする separatorTemplate
• カスタム区切りアイコンとスタイル
• 条件付き項目テンプレート
• コンポーネントとの統合（例：ChipList）
• 高度な CSS カスタマイズ

クイックスタートの例

項目とナビゲーションを備えた基本的なパンくずリスト：

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="true">
      <e-breadcrumb-items>
        <e-breadcrumb-item iconCss="e-icons e-home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Products" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Electronics" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Laptops" url="url"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

よくあるパターン

ナビゲーションを無効にする

項目のクリックを防ぐには、enableNavigation="false" を設定します。

<ejs-breadcrumb [enableNavigation]="false">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

項目にアイコンを追加する

Syncfusion のアイコンクラスを iconCss で使用します：

<e-breadcrumb-item iconCss="e-icons e-home" text="Home"></e-breadcrumb-item>

オーバーフローを処理する

スペースが限られたレイアウトでは、maxItems と overflowMode を使用します：

<ejs-breadcrumb [maxItems]="3" overflowMode="Menu">

最後の項目のナビゲーションを有効にする

アクティブな項目／最後の項目をクリックできるようにします：

<ejs-breadcrumb [enableActiveItemNavigation]="true">

区切り文字をカスタマイズする

デフォルトの区切り文字をカスタムアイコンに置き換えます：

<ng-template #separatorTemplate>
  <span class='e-bicons e-arrow'></span>
</ng-template>

主なプロパティ

プロパティ	型	デフォルト	用途
items	Array	-	BreadcrumbItemModel 項目の配列
url	String	-	パスから項目を生成するための静的 URL
enableNavigation	Boolean	true	項目クリック時のナビゲーションを有効／無効にします
enableActiveItemNavigation	Boolean	false	アクティブな項目／最後の項目をクリックできるようにします
maxItems	Number	-	オーバーフローが発生する前に表示する項目の最大数
overflowMode	String	'Menu'	オーバーフローの処理モード
itemTemplate	Template	-	カスタム項目をレンダリングするためのテンプレート
separatorTemplate	Template	-	カスタム区切り文字のテンプレート
cssClass	String	-	スタイル設定用の CSS クラス
beforeItemRender	Event	-	項目のレンダリング前に発生するイベント

一般的な使用例

1. E コマースのナビゲーション：製品の階層を表示します（ホーム > カテゴリ > サブカテゴリ > 製品）
2. ファイルシステムブラウザー：アクセス可能な親フォルダーを含むフォルダーパスを表示します
3. ドキュメントサイト：ドキュメントの階層をたどるパンくずリスト
4. ブログのナビゲーション：投稿のカテゴリと現在の記事の場所を表示します
5. 管理ダッシュボード：セクションとサブセクションの場所を表示します
6. 複数ステップのフォーム：フォームの進行状況と完了したステップを表示します

---

次のステップ：

• getting-started.md を読んで、パンくずコンポーネントをセットアップします
• data-binding.md からデータバインディングの方法を選択します
• icons-and-visuals.md のアイコンで機能を強化します
• navigations.md でナビゲーションを設定します
• overflow-handling.md でオーバーフローを処理します
• templates-customization.md でテンプレートをカスタマイズします