Skip to main content

ion-breadcrumbs

shadow

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

¥Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs.

基本用法

¥Basic Usage

使用图标

¥Using Icons

项目上的图标

¥Icons on Items

定制分离器

¥Custom Separators

折叠条目

¥Collapsing Items

最大条目数

¥Max Items

如果项目数量多于 maxItems 的值,面包屑就会折叠起来。默认情况下,仅显示第一个和最后一个项目。

¥If there are more items than the value of maxItems, the breadcrumbs will be collapsed. By default, only the first and last items will be shown.

折叠之前或之后的项目

¥Items Before or After Collapse

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

¥Once the items are collapsed, the number of items to show can be controlled by the itemsBeforeCollapse and itemsAfterCollapse properties.

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

¥Collapsed Indicator Click -- Expand Breadcrumbs

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

¥Clicking the collapsed indicator will fire the ionCollapsedClick event. This can be used to, for example, expand the breadcrumbs.

折叠指示器点击 - 渲染弹出窗口

¥Collapsed Indicator Click -- Present Popover

ionCollapsedClick 事件还可用于渲染显示隐藏面包屑的覆盖层(在本例中为 ion-popover)。

¥The ionCollapsedClick event can also be used to present an overlay (in this case, an ion-popover) showing the hidden breadcrumbs.

主题化

¥Theming

颜色

¥Colors

CSS 自定义属性

¥CSS Custom Properties

属性

¥Properties

color

DescriptionThe 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.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Defaultundefined

itemsAfterCollapse

DescriptionThe number of breadcrumbs to show after the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed.
Attributeitems-after-collapse
Typenumber
Default1

itemsBeforeCollapse

DescriptionThe number of breadcrumbs to show before the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed.
Attributeitems-before-collapse
Typenumber
Default1

maxItems

DescriptionThe maximum number of breadcrumbs to show before collapsing.
Attributemax-items
Typenumber | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

事件

¥Events

NameDescriptionBubbles
ionCollapsedClickEmitted when the collapsed indicator is clicked on.true

方法

¥Methods

No public methods available for this component.

CSS 阴影部分

¥CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

¥CSS Custom Properties

No CSS custom properties available for this component.

插槽

¥Slots

No slots available for this component.