shadow
セグメントボタンは、segmentの中にある、関連するボタンのグループです。それらは横一列に表示されます。セグメントの value をセグメントボタンの value に設定することで、デフォルトでセグメントボタンを選択することができます。一度に選択できるセグメントボタンは1つだけです。
layoutプロパティは、デフォルトで "icon-top" に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、アイコンはラベルの上に表示されます。この動作は layout プロパティを "icon-bottom", "icon-start", "icon-end" に設定することで変更可能で、それぞれアイコンをラベルの下、ラベルの先頭（LTRでは左、RTLでは右）、ラベルの末尾（LTRでは右、RTLでは左）に表示することができます。
contentId
| Description | セグメントコンテンツの id 。 |
| Attribute | content-id |
| Type | string ｜ undefined |
| Default | undefined |
| Description | trueの場合、ユーザーはセグメントボタンを操作することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | セグメント内のテキストとアイコンのレイアウトを設定します。 |
| Attribute | layout |
| Type | "icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined |
| Default | 'icon-top' |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。
This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | ボタンの種類です。 |
| Attribute | type |
| Type | "button" ｜ "reset" ｜ "submit" |
| Default | 'button' |
| Description | セグメントボタンの値です。 |
| Attribute | value |
| Type | number ｜ string |
| Default | 'ion-sb-' + ids++ |
No events available for this component.
No public methods available for this component.
| Name | Description |
|---|
indicator | チェックしたセグメントボタンに表示されるインジケーターです。 |
indicator-background | チェックしたセグメントボタンに表示されるインジケータの背景要素です。 |
native | すべての子要素を包むネイティブ HTML ボタン要素。 |
| 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 | セグメントボタンの遷移 |
| 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 | セグメントボタンの遷移 |
No slots available for this component.