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. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| 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.