跳到主要内容
版本:v6

ion-breadcrumbs

shadow

面包屑(Breadcrumbs)是用于指示用户在应用或网站中当前位置的导航项。它们应使用于具有分层页面的大型网站和应用中。面包屑可以根据可显示的最大数量进行折叠,点击折叠指示器可以显示包含更多信息的弹出框或展开折叠的面包屑。

基本用法​

使用图标​

项目上的图标​

自定义分隔符​

折叠项目​

最大项目数​

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

折叠前后显示项目数​

一旦项目被折叠,可以通过 itemsBeforeCollapse 和 itemsAfterCollapse 属性控制显示的项目数量。

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

点击折叠指示器将触发 ionCollapsedClick 事件。这可用于例如展开面包屑。

点击折叠指示器 -- 显示弹出框​

ionCollapsedClick 事件也可用于显示覆盖层(在此例中为 ion-popover),显示隐藏的面包屑。

主题​

颜色​

CSS 自定义属性​

属性​

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

事件​

Name说明冒泡
ionCollapsedClickEmitted when the collapsed indicator is clicked on.true

方法​

该组件没有可用的公共方法。

CSS 阴影部分​

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性​

该组件没有可用的 CSS 自定义属性。

插槽​

该组件没有可用的插槽。