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カスタムプロパティ

プロパティ

contentId

Description	セグメントコンテンツの id 。
Attribute	content-id
Type	string ｜ undefined
Default	undefined

disabled

Description	trueの場合、ユーザーはセグメントボタンを操作することができません。
Attribute	disabled
Type	boolean
Default	false

layout

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

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

type

Description	ボタンの種類です。
Attribute	type
Type	"button" ｜ "reset" ｜ "submit"
Default	'button'

value

Description	セグメントボタンの値です。
Attribute	value
Type	number ｜ string
Default	'ion-sb-' + ids++

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

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

CSSカスタムプロパティ

iOS

Name	Description
--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	セグメントボタンの遷移

MD

Name	Description
--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.