shadowSegment buttons are groups of related buttons inside of a segment. They are displayed in a horizontal row. A segment button can be selected by default by setting the value of the segment to the value of the segment button. Only one segment button can be selected at a time.
The layout property is set to "icon-top" by default. When a segment button has both an icon and a label, it will display the icon on top of the label. This behavior can be changed by setting the layout property to "icon-bottom", "icon-start", or "icon-end" which will show the icon below the label, to the start of the label (left in LTR and right in RTL) or to the end of the label (right in LTR and left in RTL), respectively.
| 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は、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | ボタンの種類です。 |
| Attribute | type |
| Type | "button" ｜ "reset" ｜ "submit" |
| Default | 'button' |
| Description | セグメントボタンの値です。 |
| Attribute | value |
| Type | 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 | セグメントボタンの遷移 |
No slots available for this component.