ion-breadcrumb
面包屑（Breadcrumb）是作为面包屑组件子元素的单个导航项。面包屑可以链接到应用中的其他位置，也可以是纯文本。每个面包屑与其下一个面包屑之间有一个分隔符，并且可以选择性地包含图标。
更多信息请参阅面包屑文档。
接口
BreadcrumbCollapsedClickEventDetail
interface BreadcrumbCollapsedClickEventDetail {
collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
}
BreadcrumbCustomEvent
虽然不是必需的，但此接口可以替代 CustomEvent 接口以提供更强的类型支持。
interface BreadcrumbCustomEvent extends CustomEvent {
detail: BreadcrumbCollapsedClickEventDetail;
target: HTMLIonBreadcrumbElement;
}
属性
active
| 说明 | If true, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to true for the last breadcrumb if it is not set on any. |
| 属性 | active |
| 类型 | boolean |
| 默认值 | false |
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 |
disabled
| 说明 | If true, the user cannot interact with the breadcrumb. |
| 属性 | disabled |
| 类型 | boolean |
| 默认值 | false |
download
| 说明 | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). |
| 属性 | download |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
href
| 说明 | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. |
| 属性 | href |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
mode
| 说明 | The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
rel
| 说明 | Specifies the relationship of the target object to the link object. The value is a space-separated list of link types. |
| 属性 | rel |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
routerAnimation
| 说明 | When using a router, it specifies the transition animation when navigating to another page using href. |
| 属性 | undefined |
| 类型 | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| 默认值 | undefined |
routerDirection
| 说明 | When using a router, it specifies the transition direction when navigating to another page using href. |
| 属性 | router-direction |
| 类型 | "back" ｜ "forward" ｜ "root" |
| 默认值 | 'forward' |
separator
| 说明 | If true, show a separator between this breadcrumb and the next. Defaults to true for all breadcrumbs except the last. |
| 属性 | separator |
| 类型 | boolean ｜ undefined |
| 默认值 | undefined |
target
| 说明 | Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top". |
| 属性 | target |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
事件
| Name | 说明 | 冒泡 |
|---|---|---|
ionBlur | Emitted when the breadcrumb loses focus. | true |
ionFocus | Emitted when the breadcrumb has focus. | true |
方法
该组件没有可用的公共方法。
CSS 阴影部分
| Name | 说明 |
|---|---|
collapsed-indicator | The indicator element that shows the breadcrumbs are collapsed. |
native | The native HTML anchor or div element that wraps all child elements. |
separator | The separator element between each breadcrumb. |
CSS 自定义属性
| Name | 说明 |
|---|---|
--background-focused | Background color of the breadcrumb when focused |
--color | Text color of the breadcrumb |
--color-active | Text color of the active breadcrumb |
--color-focused | Text color of the breadcrumb when focused |
--color-hover | Text color of the breadcrumb on hover |
插槽
该组件没有可用的插槽。