Skip to main content
Version: v7

ion-segment-button

shadow

セグメントボタンは、segmentの中にある、関連するボタンのグループです。それらは横一列に表示されます。セグメントの value をセグメントボタンの value に設定することで、デフォルトでセグメントボタンを選択することができます。一度に選択できるセグメントボタンは1つだけです。

基本的な使い方

Layout

layoutプロパティは、デフォルトで "icon-top" に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、アイコンはラベルの上に表示されます。この動作は layout プロパティを "icon-bottom", "icon-start", "icon-end" に設定することで変更可能で、それぞれアイコンをラベルの下、ラベルの先頭(LTRでは左、RTLでは右)、ラベルの末尾(LTRでは右、RTLでは左)に表示することができます。

テーマ

CSS Shadow Parts

CSSカスタムプロパティ

プロパティ

disabled

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

layout

Descriptionセグメント内のテキストとアイコンのレイアウトを設定します。
Attributelayout
Type"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined
Default'icon-top'

mode

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

type

Descriptionボタンの種類です。
Attributetype
Type"button" | "reset" | "submit"
Default'button'

value

Descriptionセグメントボタンの値です。
Attributevalue
Typestring
Default'ion-sb-' + ids++

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
indicatorチェックしたセグメントボタンに表示されるインジケーターです。
indicator-backgroundチェックしたセグメントボタンに表示されるインジケータの背景要素です。
nativeすべての子要素を包むネイティブ HTML ボタン要素。

CSSカスタムプロパティ

NameDescription
--backgroundセグメントボタンの背景
--background-checkedチェックしたセグメントボタンの背景
--background-focusedタブキーでフォーカスされたときのセグメントボタンの背景
--background-focused-opacityタブキーでフォーカスしたときのセグメントボタンの背景の不透明度
--background-hoverセグメントボタンがホバーされたときの背景
--background-hover-opacityホバー時のセグメントボタンの背景の不透明度
--border-colorセグメントボタンのボーダーの色
--border-radiusセグメントボタンのボーダーの半径
--border-styleセグメントボタンのボーダーのスタイル
--border-widthセグメントボタンの枠の幅
--colorセグメントボタンの色
--color-checkedチェックしたセグメントボタンの色
--color-focusedタブキーでフォーカスしたときのセグメントボタンの色
--color-hoverホバー時のセグメントボタンの色
--indicator-box-shadowチェックしたセグメントボタンのインジケーターにボックスシャドウを付ける
--indicator-colorチェックしたセグメントボタンのインジケーターの色
--indicator-heightチェックしたセグメントボタンのインジケータの高さ
--indicator-transformチェックされたセグメントボタンのインジケータのトランスフォーム
--indicator-transitionチェックしたセグメントボタンのインジケーターの遷移
--margin-bottomセグメントボタンのBottom Margin
--margin-endセグメントボタンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin
--margin-startセグメントボタンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin
--margin-topセグメントボタンのTop Margin
--padding-bottomセグメントボタンのBottom Padding
--padding-endセグメントボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
--padding-startセグメントボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
--padding-topセグメントボタンのTop Padding
--transitionセグメントボタンの遷移

Slots

No slots available for this component.