メインコンテンツまでスキップ
Version: v6

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 )を提示するために使用することができます。

Theming

Colors

CSS Custom Properties

プロパティ

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

itemsAfterCollapse

DescriptionThe number of breadcrumbs to show after the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed.
Attributeitems-after-collapse
Typenumber
Default1

itemsBeforeCollapse

DescriptionThe number of breadcrumbs to show before the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed.
Attributeitems-before-collapse
Typenumber
Default1

maxItems

DescriptionThe maximum number of breadcrumbs to show before collapsing.
Attributemax-items
Typenumber | undefined
Defaultundefined

mode

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

イベント

NameDescription
ionCollapsedClickEmitted when the collapsed indicator is clicked on.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the breadcrumbs
--colorText color of the breadcrumbs

Slots

No slots available for this component.