ion-breadcrumbs
Breadcrumbsは、ユーザーがアプリやサイトのどこにいるのかを示すために使用されるナビゲーションアイテムです。大規模なサイトや、階層的に配置されたページを持つアプリで使用する必要があります。Breadcrumbsは、表示可能な最大数に応じて折りたたむことができ、折りたたんだインジケータをクリックすると、詳細情報を示すポップオーバーが表示され、折りたたんだBreadcrumbを展開することができます。
基本的な使い方
Using Icons
アイテムでのアイコン
Custom Separators
Collapsing Items
Max Items
maxItems の値よりも多くのアイテムがある場合、breadcrumbsは折りたたまれます。デフォルトでは、最初と最後のアイテムのみが表示されます。
Items Before or After Collapse
アイテムが折りたたまれた後、表示するアイテムの数は itemsBeforeCollapse と itemsAfterCollapse プロパティで制御することができます。
Collapsed Indicator Click -- Expand Breadcrumbs
インジケータをクリックすると、ionCollapsedClick イベントが発生します。これは、例えば、breadcrumbsを展開するために使うことができます。
Collapsed Indicator Click -- Present Popover
また、ionCollapsedClick イベントは、隠されたパンくずを表示するオーバーレイ（この場合は ion-popover ）を提示するために使用することができます。
テーマ
Colors
CSSカスタムプロパティ
プロパティ
color
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined |
| Default | undefined |
itemsAfterCollapse
| Description | 折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse+itemsAfterCollapseがmaxItems` よりも大きい場合、パンくずは折りたたまれない。 |
| Attribute | items-after-collapse |
| Type | number |
| Default | 1 |
itemsBeforeCollapse
| Description | 折りたたんだインジケータの前に表示するパンくずの数を指定します。itemsBeforeCollapse+itemsAfterCollapseがmaxItems` よりも大きい場合、パンくずは折りたたまれない。 |
| Attribute | items-before-collapse |
| Type | number |
| Default | 1 |
maxItems
| Description | 折りたたむ前に表示するパンくずの最大数を指定します。 |
| Attribute | max-items |
| Type | number ｜ undefined |
| Default | undefined |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
イベント
| Name | Description |
|---|---|
ionCollapsedClick | 折りたたみインジケータがクリックされたときに発行されます。 |
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
No CSS custom properties available for this component.
Slots
No slots available for this component.