ion-breadcrumbs
Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs.
Basic Usage
Using Icons
Icons on Items
Custom Separators
Collapsing Items
Max Items
If there are more items than the value of maxItems, the breadcrumbs will be collapsed. By default, only the first and last items will be shown.
Items Before or After Collapse
Once the items are collapsed, the number of items to show can be controlled by the itemsBeforeCollapse and itemsAfterCollapse properties.
Collapsed Indicator Click -- Expand Breadcrumbs
Clicking the collapsed indicator will fire the ionCollapsedClick event. This can be used to, for example, expand the breadcrumbs.
Collapsed Indicator Click -- Present Popover
The ionCollapsedClick event can also be used to present an overlay (in this case, an ion-popover) showing the hidden breadcrumbs.
Theming
Colors
CSS Custom Properties
Properties
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 ｜ 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は、どのプラットフォームのスタイルを使用するかを決定します。 This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
Events
| Name | Description | Bubbles |
|---|---|---|
ionCollapsedClick | 折りたたみインジケータがクリックされたときに発行されます。 | true |
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.