ion-breadcrumb

shadow

Breadcrumbは、Breadcrumbsコンポーネントの子であり、単一のナビゲーションアイテムです。Breadcrumbは、アプリ内の他の場所にリンクすることも、プレーンテキストにすることもできます。Breadcrumbsは、次のBreadcrumbとの間にセパレータを持ち、オプションでアイコンを含むことができます。

詳しい説明は Breadcrumbs を参照ください。

Interfaces

BreadcrumbCollapsedClickEventDetail

interface BreadcrumbCollapsedClickEventDetail {
  collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
}

BreadcrumbCustomEvent

必須ではありませんが、より強い型付けのために、このインターフェースを CustomEvent インターフェースの代わりに使用することができます。

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

プロパティ

active

Description	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.
Attribute	active
Type	boolean
Default	false

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 & Record<never, never> ｜ undefined
Default	undefined

disabled

Description	trueの場合、ユーザーはパンくずと対話することができません。
Attribute	disabled
Type	boolean
Default	false

download

Description	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).
Attribute	download
Type	string ｜ undefined
Default	undefined

href

Description	Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attribute	href
Type	string ｜ undefined
Default	undefined

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

rel

Description	Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attribute	rel
Type	string ｜ undefined
Default	undefined

routerAnimation

Description	When using a router, it specifies the transition animation when navigating to another page using href.
Attribute	undefined
Type	((baseEl: any, opts?: any) => Animation) ｜ undefined
Default	undefined

routerDirection

Description	When using a router, it specifies the transition direction when navigating to another page using href.
Attribute	router-direction
Type	"back" ｜ "forward" ｜ "root"
Default	'forward'

separator

Description	If true, show a separator between this breadcrumb and the next. Defaults to true for all breadcrumbs except the last.
Attribute	separator
Type	boolean ｜ undefined
Default	undefined

target

Description	Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
Attribute	target
Type	string ｜ undefined
Default	undefined

イベント

Name	Description
ionBlur	パンくずのフォーカスが外れたときに発行されます。
ionFocus	パンくずがフォーカスされたときに発行されます。

メソッド

No public methods available for this component.

CSS Shadow Parts

Name	Description
collapsed-indicator	パンくずが折りたたまれていることを示すインジケーター要素です。
native	すべての子要素を包むネイティブHTMLのアンカーまたはdiv要素です。
separator	各パンくずの間のセパレータ要素です。

CSSカスタムプロパティ

Name	Description
--background-focused	フォーカス時のパンくずの背景色
--color	パンくずの文字色
--color-active	アクティブなパンくずのテキスト色
--color-focused	フォーカスされたときのパンくずのテキスト色
--color-hover	ホバー時のパンくずのテキスト色

Slots

No slots available for this component.