跳至主要内容
版本: v8

ion-breadcrumbs

阴影

面包屑是用来指示用户在应用程序或网站中的位置的导航项。 它们应该用于具有分层排列页面的大型网站和应用程序。 面包屑可以根据可以显示的最大数量进行折叠,并且可以单击折叠指示器以显示带有更多信息或展开折叠面包屑的弹出窗口。

基本用法

使用图标

项目上的图标

自定义分隔符

折叠项目

最大项目数

如果项目数大于 maxItems 的值,则面包屑将被折叠。 默认情况下,仅显示第一个和最后一个项目。

折叠前后显示的项目

折叠项目后,可以使用 itemsBeforeCollapseitemsAfterCollapse 属性控制要显示的项目数量。

折叠指示器点击 - 展开面包屑

单击折叠指示器将触发 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 自定义属性。

插槽

此组件没有可用的插槽。