Skip to main content

ion-breadcrumb

shadow

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

¥A Breadcrumb is a single navigation item that is a child of the Breadcrumbs component. A breadcrumb can link elsewhere in an app or it can be plain text. Each breadcrumb has a separator between it and the next breadcrumb and can optionally contain an icon.

有关详细信息,请参阅 面包屑 文档。

¥See the Breadcrumbs documentation for more information.

接口

¥Interfaces

interface BreadcrumbCollapsedClickEventDetail {
collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
}

虽然不是必需的,但可以使用此接口代替 CustomEvent 接口以实现更强的输入。

¥While not required, this interface can be used in place of the CustomEvent interface for stronger typing .

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

属性

¥Properties

active

DescriptionIf 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.
Attributeactive
Typeboolean
Defaultfalse

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

disabled

DescriptionIf true, the user cannot interact with the breadcrumb.
Attributedisabled
Typeboolean
Defaultfalse

download

DescriptionThis 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).
Attributedownload
Typestring | undefined
Defaultundefined

href

DescriptionContains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attributehref
Typestring | undefined
Defaultundefined

mode

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

rel

DescriptionSpecifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attributerel
Typestring | undefined
Defaultundefined

routerAnimation

DescriptionWhen using a router, it specifies the transition animation when navigating to another page using href.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

routerDirection

DescriptionWhen using a router, it specifies the transition direction when navigating to another page using href.
Attributerouter-direction
Type"back" | "forward" | "root"
Default'forward'

separator

DescriptionIf true, show a separator between this breadcrumb and the next. Defaults to true for all breadcrumbs except the last.
Attributeseparator
Typeboolean | undefined
Defaultundefined

target

DescriptionSpecifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

事件

¥Events

NameDescriptionBubbles
ionBlurEmitted when the breadcrumb loses focus.true
ionFocusEmitted when the breadcrumb has focus.true

方法

¥Methods

No public methods available for this component.

CSS 阴影部分

¥CSS Shadow Parts

NameDescription
collapsed-indicatorThe indicator element that shows the breadcrumbs are collapsed.
nativeThe native HTML anchor or div element that wraps all child elements.
separatorThe separator element between each breadcrumb.

CSS 自定义属性

¥CSS Custom Properties

NameDescription
--background-focusedBackground color of the breadcrumb when focused
--colorText color of the breadcrumb
--color-activeText color of the active breadcrumb
--color-focusedText color of the breadcrumb when focused
--color-hoverText color of the breadcrumb on hover

插槽

¥Slots

No slots available for this component.