本文へ移動
バージョン: v8

ion-segment

影

セグメントは、セグメントコントロールとも呼ばれる、関連するボタンのグループを水平方向の行に表示します。ツールバーまたはメインコンテンツ内に表示できます。

その機能はタブに似ており、1つを選択すると他のすべてが選択解除されます。セグメントは、コンテンツ内の異なるビューを切り替えるのに役立ちます。コントロールのクリックでページ間を移動する必要がある場合は、セグメントの代わりにタブを使用する必要があります。

基本的な使用方法​

セグメントは、各ボタンにvalueプロパティを持つセグメントボタンで構成されています。ボタンを選択するには、セグメントのvalueプロパティをボタンの値と一致するように設定します。セグメントは、ユーザーが操作できないように無効にすることもできます。

スクロール可能なセグメント​

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

ツールバー内のセグメント​

スワイプ可能なセグメント​

各セグメントボタンは、セグメントがアクティブなときに表示されるセグメントコンテンツ要素に関連付けることができます。このアプローチでは、各セグメントのコンテンツをスワイプまたはスクロールで切り替えることができ、セグメントは現在表示されているコンテンツを反映するように更新されます。

警告

スワイプ可能なセグメントを使用する場合、ion-segmentに初期のvalueが割り当てられていないと、セグメントは最初のセグメントボタンの値にデフォルト設定されます。

スワイプ可能なセグメントで使用する場合、セグメントボタンを無効にすることはできません。

テーマ​

色​

CSSカスタムプロパティ​

アクセシビリティ​

キーボード操作​

このコンポーネントは、ion-segment-button要素間を移動して選択するための完全なキーボードサポートを備えています。デフォルトでは、キーボードナビゲーションはion-segment-button要素のみにフォーカスされますが、selectOnFocusプロパティを使用して、フォーカス時に選択されるようにすることもできます。次の表は、各キーの機能の詳細を示しています。

キー説明
右矢印次のフォーカス可能な要素にフォーカスします。
左矢印前のフォーカス可能な要素にフォーカスします。
Home最初のフォーカス可能な要素にフォーカスします。
End最後のフォーカス可能な要素にフォーカスします。
SpaceまたはEnter現在フォーカスされている要素を選択します。

インターフェース​

SegmentChangeEventDetail​

interface SegmentChangeEventDetail {
  value?: string;
}

SegmentCustomEvent​

必須ではありませんが、このインターフェースはCustomEventインターフェースの代わりに使用して、このコンポーネントから発行されるIonicイベントの型付けを強化できます。

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

プロパティ​

color​

説明アプリケーションの色パレットから使用する色。デフォルトのオプションは、"primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、"dark"です。色の詳細については、テーマ設定を参照してください。
属性color
型"danger"｜"dark"｜"light"｜"medium"｜"primary"｜"secondary"｜"success"｜"tertiary"｜"warning"｜文字列｜未定義
デフォルト未定義

disabled​

説明trueの場合、ユーザーはセグメントを操作できません。
属性disabled
型ブール値
デフォルトfalse

mode​

説明モードは、使用するプラットフォームスタイルを決定します。
属性mode
型"ios"｜"md"
デフォルト未定義

scrollable​

説明trueの場合、セグメントボタンはオーバーフローし、ユーザーはスワイプしてそれらを見ることができます。さらに、隠されたボタンを表示するためにスワイプするために、ボタン間のインジケーターをドラッグするジェスチャーが無効になります。
属性scrollable
型ブール値
デフォルトfalse

selectOnFocus​

説明trueの場合、キーボードでion-segment-buttonに移動すると、要素にフォーカスされ、選択されます。falseの場合、キーボードナビゲーションはion-segment-button要素のみにフォーカスされます。
属性select-on-focus
型ブール値
デフォルトfalse

swipeGesture​

説明trueの場合、ユーザーはセグメントボタン間をスワイプしてアクティブ化できます。
属性swipe-gesture
型ブール値
デフォルトtrue

value​

説明セグメントの値。
属性value
型数値｜文字列｜未定義
デフォルト未定義

イベント​

名前説明バブル
ionChangeion-segmentからドラッグポインタが解放され、valueプロパティが変更されたときに発生します。

このイベントは、valueプロパティをプログラムで設定した場合には発生しません。		true

メソッド​

このコンポーネントで使用できる公開メソッドはありません。

CSSシャドウパーツ​

このコンポーネントで使用できるCSSシャドウパーツはありません。

CSSカスタムプロパティ​

名前説明
--backgroundセグメントボタンの背景

スロット​

このコンポーネントで使用できるスロットはありません。

目次

このページを編集