Skip to main content
Version: v7

ion-breadcrumb

shadow

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

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

Interfaces

interface BreadcrumbCollapsedClickEventDetail {
collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
}

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

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

プロパティ

active

Descriptiontrueの場合、パンくずが現在アクティブなパンくずであることを示すために、パンくずの外観を変化させることができる。最後のパンくずが設定されていない場合、デフォルトは true です。
Attributeactive
Typeboolean
Defaultfalse

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザーはパンくずと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

download

Descriptionこの属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます(ユーザーはファイル名を変更することができます)。
Attributedownload
Typestring | undefined
Defaultundefined

href

Descriptionハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。
Attributehref
Typestring | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

rel

Descriptionターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られたリンクタイプのリストです。
Attributerel
Typestring | undefined
Defaultundefined

routerAnimation

Descriptionルータを使用する場合、hrefを使用して別のページに移動する際の遷移アニメーションを指定します。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

routerDirection

Descriptionルータを使用する場合、hrefを使用して他のページに移動する際の遷移方向を指定します。
Attributerouter-direction
Type"back" | "forward" | "root"
Default'forward'

separator

Descriptiontrueの場合、このパンくずと次のパンくずの間にセパレータを表示します。デフォルトは true で、最後のパンくずを除くすべてのパンくずが表示されます。
Attributeseparator
Typeboolean | undefined
Defaultundefined

target

Descriptionリンク先のURLを表示する場所を指定します。hrefを指定した場合のみ適用される。特別なキーワードがあります。_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

イベント

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

メソッド

No public methods available for this component.

CSS Shadow Parts

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

CSSカスタムプロパティ

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

Slots

No slots available for this component.