跳到主要内容
版本:v8

ion-breadcrumbs

shadow

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

基本用法

使用图标

项目图标

自定义分隔符

折叠项目

最大项目数

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

折叠前后的项目

项目折叠后,可以通过 itemsBeforeCollapseitemsAfterCollapse 属性控制显示的项目数量。

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

点击折叠指示器将触发 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说明冒泡
ionCollapsedClickEmitted when the collapsed indicator is clicked on.true

Methods

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

CSS Shadow Parts

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

CSS Custom Properties

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

Slots

该组件没有可用的插槽。