Skip to main content
Version: v7

ion-breadcrumbs

shadow

Breadcrumbsは、ユーザーがアプリやサイトのどこにいるのかを示すために使用されるナビゲーションアイテムです。大規模なサイトや、階層的に配置されたページを持つアプリで使用する必要があります。Breadcrumbsは、表示可能な最大数に応じて折りたたむことができ、折りたたんだインジケータをクリックすると、詳細情報を示すポップオーバーが表示され、折りたたんだBreadcrumbを展開することができます。

基本的な使い方

Using Icons

アイテムでのアイコン

Custom Separators

Collapsing Items

Max Items

maxItems の値よりも多くのアイテムがある場合、breadcrumbsは折りたたまれます。デフォルトでは、最初と最後のアイテムのみが表示されます。

Items Before or After Collapse

アイテムが折りたたまれた後、表示するアイテムの数は itemsBeforeCollapseitemsAfterCollapse プロパティで制御することができます。

Collapsed Indicator Click -- Expand Breadcrumbs

インジケータをクリックすると、ionCollapsedClick イベントが発生します。これは、例えば、breadcrumbsを展開するために使うことができます。

Collapsed Indicator Click -- Present Popover

また、ionCollapsedClick イベントは、隠されたパンくずを表示するオーバーレイ(この場合は ion-popover )を提示するために使用することができます。

テーマ

Colors

CSSカスタムプロパティ

プロパティ

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

itemsAfterCollapse

Description折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse+itemsAfterCollapsemaxItems` よりも大きい場合、パンくずは折りたたまれない。
Attributeitems-after-collapse
Typenumber
Default1

itemsBeforeCollapse

Description折りたたんだインジケータの前に表示するパンくずの数を指定します。itemsBeforeCollapse+itemsAfterCollapsemaxItems` よりも大きい場合、パンくずは折りたたまれない。
Attributeitems-before-collapse
Typenumber
Default1

maxItems

Description折りたたむ前に表示するパンくずの最大数を指定します。
Attributemax-items
Typenumber | undefined
Defaultundefined

mode

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

イベント

NameDescription
ionCollapsedClick折りたたみインジケータがクリックされたときに発行されます。

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.