ion-breadcrumb

shadow

面包屑导航项是面包屑组件的一个子导航项。每个面包屑可以链接到应用中的其他位置，也可以是纯文本。每个面包屑与其下一个面包屑之间有一个分隔符，并且可以选择包含图标。

更多信息请参见面包屑文档。

Interfaces

BreadcrumbCollapsedClickEventDetail

interface BreadcrumbCollapsedClickEventDetail {
  collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
}

BreadcrumbCustomEvent

虽然不是必须的，但可以使用此接口替代 CustomEvent 接口，以提供更强的类型支持。

interface BreadcrumbCustomEvent extends CustomEvent {
  detail: BreadcrumbCollapsedClickEventDetail;
  target: HTMLIonBreadcrumbElement;
}

Properties

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

Events

Name	说明	冒泡
ionBlur	Emitted when the breadcrumb loses focus.	true
ionFocus	Emitted when the breadcrumb has focus.	true

Methods

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

CSS Shadow Parts

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 Custom Properties

iOS

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

MD

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

Slots

该组件没有可用的插槽。