ion-segment

shadow

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	The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attribute	color
Type	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
Default	undefined

disabled

Description	If true, the user cannot interact with the segment.
Attribute	disabled
Type	boolean
Default	false

mode

Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

scrollable

Description	If true, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
Attribute	scrollable
Type	boolean
Default	false

selectOnFocus

Description	If true, navigating to an ion-segment-button with the keyboard will focus and select the element. If false, keyboard navigation will only focus the ion-segment-button element.
Attribute	select-on-focus
Type	boolean
Default	false

swipeGesture

Description	If true, users will be able to swipe between segment buttons to activate them.
Attribute	swipe-gesture
Type	boolean
Default	true

value

Description	the value of the segment.
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

Name	Description
--background	Background of the segment button

MD

Name	Description
--background	Background of the segment button

Slots

No slots available for this component.