面包屑组件
面包屑（Breadcrumbs）是一种导航项，用于指示用户在应用或网站中所处的位置。它们适用于具有层级结构页面的大型网站和应用。面包屑可以根据可显示的最大数量进行折叠，点击折叠指示器可以弹出一个包含更多信息的浮层或展开被折叠的面包屑。
基础用法
使用图标
在项目上使用图标
自定义分隔符
折叠项目
最大项目数
如果项目数量超过 maxItems 的值，面包屑将被折叠。默认情况下，只显示第一个和最后一个项目。
折叠前后的项目数
项目折叠后，可以通过 itemsBeforeCollapse 和 itemsAfterCollapse 属性来控制显示的项目数量。
点击折叠指示器——展开面包屑
点击折叠指示器将触发 ionCollapsedClick 事件。例如，这可用于展开面包屑。
点击折叠指示器——显示浮层
ionCollapsedClick 事件也可用于显示一个浮层（本例中为 ion-popover），展示隐藏的面包屑。
主题定制
颜色
CSS 自定义属性
属性
color
| Description | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
itemsAfterCollapse
| Description | The number of breadcrumbs to show after the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed. |
| Attribute | items-after-collapse |
| Type | number |
| Default | 1 |
itemsBeforeCollapse
| Description | The number of breadcrumbs to show before the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed. |
| Attribute | items-before-collapse |
| Type | number |
| Default | 1 |
maxItems
| Description | The maximum number of breadcrumbs to show before collapsing. |
| Attribute | max-items |
| Type | number ｜ undefined |
| Default | undefined |
mode
| Description | The mode determines which platform styles to use. 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 |
事件
| Name | Description | Bubbles |
|---|---|---|
ionCollapsedClick | Emitted when the collapsed indicator is clicked on. | true |
方法
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.
插槽
No slots available for this component.