ion-breadcrumbs
面包屑（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.