ion-breadcrumbs
面包屑是用来指示用户在应用程序或网站中的位置的导航项。 它们应该用于具有分层排列页面的大型网站和应用程序。 面包屑可以根据可以显示的最大数量进行折叠,并且可以单击折叠指示器以显示带有更多信息或展开折叠面包屑的弹出窗口。
基本用法
使用图标
项目上的图标
自定义分隔符
折叠项目
最大项目数
如果项目数大于 maxItems
的值,则面包屑将被折叠。 默认情况下,仅显示第一个和最后一个项目。
折叠前后显示的项目
折叠项目后,可以使用 itemsBeforeCollapse
和 itemsAfterCollapse
属性控制要显示的项目数量。
折叠指示器点击 - 展开面包屑
单击折叠指示器将触发 ionCollapsedClick
事件。 例如,这可以用于展开面包屑。
折叠指示器点击 - 显示弹出框
ionCollapsedClick
事件也可以用于显示一个覆盖层(在本例中是一个 ion-popover
),显示隐藏的面包屑。
主题
颜色
CSS 自定义属性
属性
color
描述 | 要从应用程序调色板中使用的颜色。 默认选项为:"primary" 、"secondary" 、"tertiary" 、"success" 、"warning" 、"danger" 、"light" 、"medium" 和 "dark" 。 有关颜色的更多信息,请参阅 主题。 |
属性 | color |
类型 | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined |
默认值 | undefined |
itemsAfterCollapse
描述 | 折叠指示器后要显示的面包屑数量。 如果 itemsBeforeCollapse + itemsAfterCollapse 大于 maxItems ,则面包屑将不会被折叠。 |
属性 | items-after-collapse |
类型 | number |
默认值 | 1 |
itemsBeforeCollapse
描述 | 折叠指示器前要显示的面包屑数量。 如果 itemsBeforeCollapse + itemsAfterCollapse 大于 maxItems ,则面包屑将不会被折叠。 |
属性 | items-before-collapse |
类型 | number |
默认值 | 1 |
maxItems
描述 | 折叠前要显示的最大面包屑数量。 |
属性 | max-items |
类型 | number | undefined |
默认值 | undefined |
mode
描述 | mode 决定使用哪个平台样式。 |
属性 | mode |
类型 | "ios" | "md" |
默认值 | undefined |
事件
名称 | 描述 | 冒泡 |
---|---|---|
ionCollapsedClick | 单击折叠指示器时发出。 | true |
方法
此组件没有可用的公共方法。
CSS 阴影部分
此组件没有可用的 CSS 阴影部分。
CSS 自定义属性
此组件没有可用的 CSS 自定义属性。
插槽
此组件没有可用的插槽。