Version: v7

ion-breadcrumbs

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

基本的な使い方

<ion-breadcrumbs>
  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
</ion-breadcrumbs>

Using Icons

アイテムでのアイコン

<ion-label>Icons at Start</ion-label>
<ion-breadcrumbs>
  <ion-breadcrumb href="#home">
    <ion-icon slot="start" name="home"></ion-icon>
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    <ion-icon slot="start" name="flash"></ion-icon>
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    <ion-icon slot="start" name="camera"></ion-icon>
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    <ion-icon slot="start" name="film"></ion-icon>
    Film
  </ion-breadcrumb>
</ion-breadcrumbs>

<ion-label class="ion-margin-top">Icons at End</ion-label>
<ion-breadcrumbs>
  <ion-breadcrumb href="#home">
    Home
    <ion-icon slot="end" name="home"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
    <ion-icon slot="end" name="flash"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
    <ion-icon slot="end" name="camera"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
    <ion-icon slot="end" name="film"></ion-icon>
  </ion-breadcrumb>
</ion-breadcrumbs>

Custom Separators

<ion-breadcrumbs>
  <ion-breadcrumb href="#home">
    Home
    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
  </ion-breadcrumb>
</ion-breadcrumbs>

Collapsing Items

Max Items

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

<ion-breadcrumbs [maxItems]="4">
  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
</ion-breadcrumbs>

Items Before or After Collapse

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

<div>Before Collapse = 2</div>
<ion-breadcrumbs [maxItems]="4" [itemsBeforeCollapse]="2">
  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
</ion-breadcrumbs>

<div class="ion-margin-top">Before Collapse = 0</div>
<ion-breadcrumbs [maxItems]="4" [itemsBeforeCollapse]="0">
  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
</ion-breadcrumbs>

<div class="ion-margin-top">After Collapse = 2</div>
<ion-breadcrumbs [maxItems]="4" [itemsAfterCollapse]="2">
  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
</ion-breadcrumbs>

<div class="ion-margin-top">Before Collapse = 2, After Collapse = 2</div>
<ion-breadcrumbs [maxItems]="4" [itemsBeforeCollapse]="2" [itemsAfterCollapse]="2">
  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
</ion-breadcrumbs>

Collapsed Indicator Click -- Expand Breadcrumbs

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

src/app/example.component.html
src/app/example.component.ts

<ion-breadcrumbs [maxItems]="maxBreadcrumbs" (ionCollapsedClick)="expandBreadcrumbs()">
  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
</ion-breadcrumbs>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  maxBreadcrumbs = 4;

  expandBreadcrumbs() {
    this.maxBreadcrumbs = undefined;
  }
}

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

src/app/example.component.html
src/app/example.component.ts

<ion-breadcrumbs [maxItems]="4" (ionCollapsedClick)="presentPopover($event)">
  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
  <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
</ion-breadcrumbs>
<ion-popover #popover [isOpen]="isOpen" (didDismiss)="isOpen = false">
  <ng-template>
    <ion-content>
      <ion-list>
        <ion-item
          *ngFor="let breadcrumb of collapsedBreadcrumbs; last as isLast"
          [href]="breadcrumb.href"
          [lines]="isLast ? 'none' : null"
        >
          <ion-label>{{ breadcrumb.textContent }}</ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ng-template>
</ion-popover>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  @ViewChild('popover') popover;

  isOpen = false;
  collapsedBreadcrumbs: HTMLIonBreadcrumbElement[] = [];

  async presentPopover(e: Event) {
    this.collapsedBreadcrumbs = (e as CustomEvent).detail.collapsedBreadcrumbs;
    this.popover.event = e;
    this.isOpen = true;
  }
}

テーマ

Colors

<ion-breadcrumbs color="primary">
  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
</ion-breadcrumbs>

CSSカスタムプロパティ

src/app/example.component.css
src/app/example.component.html

ion-breadcrumb {
  --color: rgb(81, 155, 198);
  --color-active: rgb(150, 112, 220);
  --color-hover: rgb(103, 61, 180);
}

<ion-breadcrumbs>
  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
</ion-breadcrumbs>

プロパティ

color

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

itemsAfterCollapse

Description	折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse`+`itemsAfterCollapse`が`maxItems` よりも大きい場合、パンくずは折りたたまれない。
Attribute	`items-after-collapse`
Type	`number`
Default	`1`

itemsBeforeCollapse

Description	折りたたんだインジケータの前に表示するパンくずの数を指定します。itemsBeforeCollapse`+`itemsAfterCollapse`が`maxItems` よりも大きい場合、パンくずは折りたたまれない。
Attribute	`items-before-collapse`
Type	`number`
Default	`1`

maxItems

Description	折りたたむ前に表示するパンくずの最大数を指定します。
Attribute	`max-items`
Type	`number ｜ undefined`
Default	`undefined`

mode

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

イベント

Name	Description
`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.

ion-breadcrumbs

基本的な使い方

Using Icons

アイテムでのアイコン

Custom Separators

Collapsing Items

Max Items

Items Before or After Collapse

Collapsed Indicator Click -- Present Popover

テーマ

Colors

CSSカスタムプロパティ

プロパティ

color

itemsAfterCollapse

itemsBeforeCollapse

maxItems

mode

イベント

メソッド

CSS Shadow Parts

CSSカスタムプロパティ

Slots

Contents

基本的な使い方​

Using Icons​

アイテムでのアイコン​

Custom Separators​

Collapsing Items​

Max Items​

Items Before or After Collapse​

Collapsed Indicator Click -- Expand Breadcrumbs​

Collapsed Indicator Click -- Present Popover​

テーマ​

Colors​

CSSカスタムプロパティ​

プロパティ​

color​

itemsAfterCollapse​

itemsBeforeCollapse​

maxItems​

mode​

イベント​

メソッド​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

Using Icons

アイテムでのアイコン

Custom Separators

Collapsing Items

Max Items

Items Before or After Collapse

Collapsed Indicator Click -- Expand Breadcrumbs

Collapsed Indicator Click -- Present Popover

テーマ

Colors

CSSカスタムプロパティ

プロパティ

color

itemsAfterCollapse

itemsBeforeCollapse

maxItems

mode

イベント

メソッド

CSS Shadow Parts

CSSカスタムプロパティ

Slots