ion-breadcrumbs
パンくずリストは、ユーザーがアプリまたはサイトのどこに位置しているかを示すために使用されるナビゲーション項目です。階層的に配置されたページを持つ大規模なサイトやアプリに使用されるべきです。パンくずリストは表示できる最大数に基づいて折り畳むことができ、折り畳まれたインジケーターをクリックすると、詳細情報が表示されたり、折り畳まれたパンくずリストが展開されたりします。
基本的な使用方法
アイコンの使用
アイテムへのアイコン
カスタムセパレーター
アイテムの折りたたみ
最大アイテム数
maxItems の値よりもアイテムが多い場合、パンくずリストは折り畳まれます。デフォルトでは、最初と最後のアイテムのみが表示されます。
折りたたみ前後のアイテム
アイテムが折り畳まれた後、表示するアイテムの数は、itemsBeforeCollapse と itemsAfterCollapse プロパティで制御できます。
折り畳みインジケーターのクリック - パンくずリストの展開
折り畳まれたインジケーターをクリックすると、ionCollapsedClick イベントが発生します。これは、たとえば、パンくずリストを展開するために使用できます。
折り畳みインジケーターのクリック - ポップオーバーの表示
ionCollapsedClick イベントは、非表示のパンくずリストを表示するオーバーレイ（この場合は ion-popover）を表示するためにも使用できます。
テーマ
色
CSS カスタムプロパティ
プロパティ
color
| 説明 | アプリケーションの色パレットから使用する色。デフォルトのオプションは、"primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、および "dark" です。色の詳細については、テーマ設定を参照してください。 |
| 属性 | color |
| 型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| デフォルト | undefined |
itemsAfterCollapse
| 説明 | 折り畳まれたインジケーターの後に表示するパンくずリストの数。itemsBeforeCollapse + itemsAfterCollapse が maxItems より大きい場合、パンくずリストは折り畳まれません。 |
| 属性 | items-after-collapse |
| 型 | number |
| デフォルト | 1 |
itemsBeforeCollapse
| 説明 | 折り畳まれたインジケーターの前に表示するパンくずリストの数。itemsBeforeCollapse + itemsAfterCollapse が maxItems より大きい場合、パンくずリストは折り畳まれません。 |
| 属性 | items-before-collapse |
| 型 | number |
| デフォルト | 1 |
maxItems
| 説明 | 折りたたむ前に表示するパンくずリストの最大数。 |
| 属性 | max-items |
| 型 | number ｜ undefined |
| デフォルト | undefined |
mode
| 説明 | モードは、使用するプラットフォームのスタイルを決定します。 |
| 属性 | mode |
| 型 | "ios" ｜ "md" |
| デフォルト | undefined |
イベント
| 名前 | 説明 | バブル |
|---|---|---|
ionCollapsedClick | 折り畳まれたインジケーターがクリックされたときに発生します。 | true |
メソッド
このコンポーネントで使用できる公開メソッドはありません。
CSS シャドウパーツ
このコンポーネントで使用できる CSS シャドウパーツはありません。
CSS カスタムプロパティ
このコンポーネントで使用できる CSS カスタムプロパティはありません。
スロット
このコンポーネントで使用できるスロットはありません。