Skip to main content
Version: v7

ion-segment

shadow

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

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

基本的な使い方

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

Scrollable Segments

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

Segments in Toolbars

テーマ

Colors

CSSカスタムプロパティ

アクセシビリティ

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

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

KeyFunction
ArrowRightFocuses the next focusable element.
ArrowLeftFocuses the previous focusable element.
HomeFocuses the first focusable element.
EndFocuses the last focusable element.
Space or EnterSelects 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 を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザーはセグメントと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

mode

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

scrollable

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

selectOnFocus

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

swipeGesture

Descriptiontrueの場合、ユーザーはセグメントボタンの間をスワイプしてアクティブにすることができます。
Attributeswipe-gesture
Typeboolean
Defaulttrue

value

Descriptionセグメントの価値
Attributevalue
Typestring | undefined
Defaultundefined

イベント

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

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--backgroundセグメントボタンの背景

Slots

No slots available for this component.