Version: v7

ion-segment

Segmentsは、関連するボタンのグループを水平方向の行に表示することができ、segmented controlsとも呼ばれます。これらは、toolbarまたはメインコンテンツの内部に表示できます。

これらの機能は、1つを選択すると他のすべてが選択解除されるTabsと似ています。Segmentsは、コンテンツ内の異なるビューを切り替える場合に便利です。クリックしてページ間の遷移をコントロールする場合は、Segmentsの代わりにTabsを使用してください。

基本的な使い方

セグメントはセグメントボタンからなり、各ボタンにはvalueプロパティが設定されています。セグメントの value プロパティをボタンの値と一致させることで、そのボタンを選択することができます。また、セグメントを無効にすることで、ユーザがセグメントと対話できないようにすることができます。

<ion-segment value="default">
  <ion-segment-button value="default">
    <ion-label>Default</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>

<ion-segment [disabled]="true" value="disabled">
  <ion-segment-button value="disabled">
    <ion-label>Disabled</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>

Scrollable Segments

デフォルトでは、セグメントはスクロールできません。各セグメントボタンの幅は固定で、セグメントボタンの数を画面幅で割って幅を決定します。これにより、各セグメントボタンがスクロールすることなく画面に表示されることが保証されます。そのため、ラベルが長いセグメントボタンは、一部が切れてしまうことがあります。これを避けるために、短いラベルを使用するか、scrollable プロパティを true に設定してスクロール可能なセグメントに変更することをお勧めします。これはセグメントを水平方向にスクロールさせますが、各セグメントボタンの幅を変更することができます。

<ion-segment [scrollable]="true" value="heart">
  <ion-segment-button value="home">
    <ion-icon name="home"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="heart">
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="pin">
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="star">
    <ion-icon name="star"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="call">
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="globe">
    <ion-icon name="globe"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="basket">
    <ion-icon name="basket"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="barbell">
    <ion-icon name="barbell"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="trash">
    <ion-icon name="trash"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="person">
    <ion-icon name="person"></ion-icon>
  </ion-segment-button>
</ion-segment>

Segments in Toolbars

<ion-header>
  <ion-toolbar>
    <ion-segment value="all">
      <ion-segment-button value="all">
        <ion-label>All</ion-label>
      </ion-segment-button>
      <ion-segment-button value="favorites">
        <ion-label>Favorites</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

テーマ

Colors

<ion-segment value="default">
  <ion-segment-button value="default">
    <ion-label>Default</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>
<ion-segment color="primary" value="primary">
  <ion-segment-button value="primary">
    <ion-label>Primary</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>
<ion-segment color="secondary" value="secondary">
  <ion-segment-button value="secondary">
    <ion-label>Secondary</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>
<ion-segment color="tertiary" value="tertiary">
  <ion-segment-button value="tertiary">
    <ion-label>Tertiary</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>
<ion-segment color="success" value="success">
  <ion-segment-button value="success">
    <ion-label>Success</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>
<ion-segment color="warning" value="warning">
  <ion-segment-button value="warning">
    <ion-label>Warning</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>
<ion-segment color="danger" value="danger">
  <ion-segment-button value="danger">
    <ion-label>Danger</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>
<ion-segment color="light" value="light">
  <ion-segment-button value="light">
    <ion-label>Light</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>
<ion-segment color="medium" value="medium">
  <ion-segment-button value="medium">
    <ion-label>Medium</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>
<ion-segment color="dark" value="dark">
  <ion-segment-button value="dark">
    <ion-label>Dark</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>

CSSカスタムプロパティ

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

ion-segment {
  --background: #54dc98;
}

<ion-segment value="custom">
  <ion-segment-button value="custom">
    <ion-label>Custom</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
</ion-segment>

アクセシビリティ

キーボードナビゲーション

このコンポーネントは、ion-segment-button要素間のナビゲーションと選択について、フルキーボードサポートを備えています。デフォルトでは、キーボードナビゲーションは ion-segment-button 要素にのみフォーカスしますが、selectOnFocus プロパティを使用すると、フォーカスされた要素も確実に選択されるようになります。次の表は、それぞれのキーが何をするのかの詳細です。

Key	Function
`ArrowRight`	Focuses the next focusable element.
`ArrowLeft`	Focuses the previous focusable element.
`Home`	Focuses the first focusable element.
`End`	Focuses the last focusable element.
`Space` or `Enter`	Selects the element that is currently focused.

Interfaces

SegmentChangeEventDetail

interface SegmentChangeEventDetail {
  value?: string;
}

SegmentCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface SegmentCustomEvent extends CustomEvent {
  target: HTMLIonSegmentElement;
  detail: SegmentChangeEventDetail;
}

プロパティ

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`

disabled

Description	`true`の場合、ユーザーはセグメントと対話することができません。
Attribute	`disabled`
Type	`boolean`
Default	`false`

mode

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

scrollable

Description	`true`の場合、セグメントボタンはオーバーフローし、ユーザーはスワイプしてそれらを見ることができます。また、スワイプして隠れたボタンを見るために、ボタンの間でインジケータをドラッグするジェスチャーを無効にします。
Attribute	`scrollable`
Type	`boolean`
Default	`false`

selectOnFocus

Description	`true`の場合、キーボードで `ion-segment-button` に移動すると、その要素にフォーカスが当たって選択される。 `false` の場合、キーボードによるナビゲーションは `ion-segment-button` 要素にのみフォーカスを当てます。
Attribute	`select-on-focus`
Type	`boolean`
Default	`false`

swipeGesture

Description	`true`の場合、ユーザーはセグメントボタンの間をスワイプしてアクティブにすることができます。
Attribute	`swipe-gesture`
Type	`boolean`
Default	`true`

value

Description	セグメントの価値
Attribute	`value`
Type	`number ｜ string ｜ undefined`
Default	`undefined`

イベント

Name	Description
`ionChange`	valueプロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行されます。

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

Name	Description
`--background`	セグメントボタンの背景

Slots

No slots available for this component.

基本的な使い方​

Scrollable Segments​

Segments in Toolbars​

テーマ​

Colors​

CSSカスタムプロパティ​

アクセシビリティ​

キーボードナビゲーション​

Interfaces​

SegmentChangeEventDetail​

SegmentCustomEvent​

プロパティ​

color​

disabled​

mode​

scrollable​

selectOnFocus​

swipeGesture​

value​

イベント​

メソッド​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

Scrollable Segments

Segments in Toolbars

テーマ

Colors

CSSカスタムプロパティ

アクセシビリティ

キーボードナビゲーション

Interfaces

SegmentChangeEventDetail

SegmentCustomEvent

プロパティ

color

disabled

mode

scrollable

selectOnFocus

swipeGesture

value

イベント

メソッド

CSS Shadow Parts

CSSカスタムプロパティ

Slots