ion-segment
Segmentsは、関連するボタンのグループを水平方向の行に表示することができ、segmented controlsとも呼ばれます。これらは、toolbarまたはメインコンテンツの内部に表示できます。
これらの機能は、1つを選択すると他のすべてが選択解除されるTabsと似ています。Segmentsは、コンテンツ内の異なるビューを切り替える場合に便利です。クリックしてページ間の遷移をコントロールする場合は、Segmentsの代わりにTabsを使用してください。
基本的な使い方
セグメントはセグメントボタンからなり、各ボタンにはvalueプロパティが設定されています。セグメントの value プロパティをボタンの値と一致させることで、そのボタンを選択することができます。また、セグメントを無効にすることで、ユーザがセグメントと対話できないようにすることができます。
Scrollable Segments
デフォルトでは、セグメントはスクロールできません。各セグメントボタンの幅は固定で、セグメントボタンの数を画面幅で割って幅を決定します。これにより、各セグメントボタンがスクロールすることなく画面に表示されることが保証されます。そのため、ラベルが長いセグメントボタンは、一部が切れてしまうことがあります。これを避けるために、短いラベルを使用するか、scrollable プロパティを true に設定してスクロール可能なセグメントに変更することをお勧めします。これはセグメントを水平方向にスクロールさせますが、各セグメントボタンの幅を変更することができます。
Segments in Toolbars
スワイプ可能なセグメント
それぞれの セグメントボタン は、セグメントがアクティブになったときに表示される セグメントコンテンツ 要素と関連付けることができます。 要素に関連付けることができます。この方法では、各セグメントをスワイプまたはスクロールすることで、セグメントの内容が更新されます。
スワイプ可能なセグメントを使用しているときに ion-segment に初期値 value が割り当てられていない場合、セグメントのデフォルトは最初のセグメントボタンの値になります。
スワイプ可能なセグメントを使用する場合、セグメントボタンを無効にすることはできません。
Theming
Colors
CSSカスタムプロパティ
アクセシビリティ
キーボードインタラクション
このコンポーネントは、ion-segment-button要素間のナビゲーションと選択について、フルキーボードサポートを備えています。デフォルトでは、キーボードナビゲーションは ion-segment-button 要素にのみフォーカスしますが、selectOnFocus プロパティを使用すると、フォーカスされた要素も確実に選択されるようになります。次の表は、それぞれのキーが何をするのかの詳細です。
| Key | Description |
|---|---|
| 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 | Bubbles |
|---|---|---|
ionChange | Emitted when the value property has changed and any dragging pointer has been released from ion-segment.This event will not emit when programmatically setting the value property. | true |
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
- iOS
- MD
| Name | Description |
|---|---|
--background | セグメントボタンの背景 |
| Name | Description |
|---|---|
--background | セグメントボタンの背景 |
Slots
No slots available for this component.