shadowSegmentsは、関連するボタンのグループを水平方向の行に表示することができ、segmented controlsとも呼ばれます。これらは、toolbarまたはメインコンテンツの内部に表示できます。
これらの機能は、1つを選択すると他のすべてが選択解除されるTabsと似ています。Segmentsは、コンテンツ内の異なるビューを切り替える場合に便利です。クリックしてページ間の遷移をコントロールする場合は、Segmentsの代わりにTabsを使用してください。
セグメントはセグメントボタンからなり、各ボタンにはvalueプロパティが設定されています。セグメントの value プロパティをボタンの値と一致させることで、そのボタンを選択することができます。また、セグメントを無効にすることで、ユーザがセグメントと対話できないようにすることができます。
デフォルトでは、セグメントはスクロールできません。各セグメントボタンの幅は固定で、セグメントボタンの数を画面幅で割って幅を決定します。これにより、各セグメントボタンがスクロールすることなく画面に表示されることが保証されます。そのため、ラベルが長いセグメントボタンは、一部が切れてしまうことがあります。これを避けるために、短いラベルを使用するか、scrollable プロパティを true に設定してスクロール可能なセグメントに変更することをお勧めします。これはセグメントを水平方向にスクロールさせますが、各セグメントボタンの幅を変更することができます。
このコンポーネントは、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. |
interface SegmentChangeEventDetail {
value?: string;
}
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。
interface SegmentCustomEvent extends CustomEvent {
target: HTMLIonSegmentElement;
detail: SegmentChangeEventDetail;
}
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined |
| Default | undefined |
| Description | trueの場合、ユーザーはセグメントと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | trueの場合、セグメントボタンはオーバーフローし、ユーザーはスワイプしてそれらを見ることができます。また、スワイプして隠れたボタンを見るために、ボタンの間でインジケータをドラッグするジェスチャーを無効にします。 |
| Attribute | scrollable |
| Type | boolean |
| Default | false |
| Description | trueの場合、キーボードで ion-segment-button に移動すると、その要素にフォーカスが当たって選択される。 false の場合、キーボードによるナビゲーションは ion-segment-button 要素にのみフォーカスを当てます。 |
| Attribute | select-on-focus |
| Type | boolean |
| Default | false |
| Description | trueの場合、ユーザーはセグメントボタンの間をスワイプしてアクティブにすることができます。 |
| Attribute | swipe-gesture |
| Type | boolean |
| Default | true |
| Description | セグメントの価値 |
| Attribute | value |
| Type | string ｜ undefined |
| Default | undefined |
| Name | Description |
|---|
ionChange | valueプロパティが変更され、ion-segmentからドラッグポインタが解放されたときに発行されます。 |
No public methods available for this component.
No CSS shadow parts available for this component.
| Name | Description |
|---|
--background | セグメントボタンの背景 |
No slots available for this component.