ion-breadcrumbs
面包屑是用于指示用户在应用或网站上的位置的导航项。它们应该用于具有分层排列页面的大型网站和应用。面包屑可以根据可显示的最大数量折叠，并且可以单击折叠的指示器以显示包含更多信息的弹出窗口或展开折叠的面包屑。
¥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
折叠项目后，可以通过 itemsBeforeCollapse 和 itemsAfterCollapse 属性控制要显示的项目数量。
¥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
| Description | 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. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
itemsAfterCollapse
| Description | The number of breadcrumbs to show after the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed. |
| Attribute | items-after-collapse |
| Type | number |
| Default | 1 |
itemsBeforeCollapse
| Description | The number of breadcrumbs to show before the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed. |
| Attribute | items-before-collapse |
| Type | number |
| Default | 1 |
maxItems
| Description | The maximum number of breadcrumbs to show before collapsing. |
| Attribute | max-items |
| Type | number ｜ undefined |
| Default | undefined |
mode
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
事件
¥Events
| Name | Description | Bubbles |
|---|---|---|
ionCollapsedClick | Emitted 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.