ion-breadcrumbs
面包屑是用于指示用户在应用或网站中当前位置的导航项。它们适用于具有分层页面结构的大型网站和应用。面包屑可以根据可显示的最大数量进行折叠,并且可以点击折叠指示器以显示包含更多信息的弹出框或展开折叠的面包屑。
基本用法
使用图标
项目图标
自定义分隔符
折叠项目
最大项目数
如果项目数量超过 maxItems 的值,面包屑将被折叠。默认情况下,只会显示第一个和最后一个项目。
折叠前后的项目
项目折叠后,可以通过 itemsBeforeCollapse 和 itemsAfterCollapse 属性控制显示的项目数量。
点击折叠指示器 -- 展开面包屑
点击折叠指示器将触发 ionCollapsedClick 事件。例如,这可以用来展开面包屑。
点击折叠指示器 -- 显示弹出框
ionCollapsedClick 事件也可以用于显示覆盖层(在此例中为 ion-popover),展示隐藏的面包屑。
主题定制
颜色
CSS 自定义属性
Properties
color
| 说明 | 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. |
| 属性 | color |
| 类型 | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined |
| 默认值 | undefined |
itemsAfterCollapse
| 说明 | The number of breadcrumbs to show after the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed. |
| 属性 | items-after-collapse |
| 类型 | number |
| 默认值 | 1 |
itemsBeforeCollapse
| 说明 | The number of breadcrumbs to show before the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed. |
| 属性 | items-before-collapse |
| 类型 | number |
| 默认值 | 1 |
maxItems
| 说明 | The maximum number of breadcrumbs to show before collapsing. |
| 属性 | max-items |
| 类型 | number | undefined |
| 默认值 | undefined |
mode
| 说明 | The mode determines which platform styles to use. 这是一个虚拟属性,在初始化时设置一次,之后更改其值不会更新组件。 |
| 属性 | mode |
| 类型 | "ios" | "md" |
| 默认值 | undefined |
Events
| Name | 说明 | 冒泡 |
|---|---|---|
ionCollapsedClick | Emitted when the collapsed indicator is clicked on. | true |
Methods
该组件没有可用的公共方法。
CSS Shadow Parts
该组件没有可用的 CSS 阴影部分。
CSS Custom Properties
该组件没有可用的 CSS 自定义属性。
Slots
该组件没有可用的插槽。