ion-segment-button
セグメントボタンは、segmentの中にある、関連するボタンのグループです。それらは横一列に表示されます。セグメントの value
をセグメントボタンの value
に設定することで、デフォルトでセグメントボタンを選択することができます。一度に選択できるセグメントボタンは1つだけです。
基本的な使い方
Layout
layout
プロパティは、デフォルトで "icon-top"
に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、アイコンはラベルの上に表示されます。この動作は layout
プロパティを "icon-bottom"
, "icon-start"
, "icon-end"
に設定することで変更可能で、それぞれアイコンをラベルの下、ラベルの先頭(LTRでは左、RTLでは右)、ラベルの末尾(LTRでは右、RTLでは左)に表示することができます。
テーマ
CSS Shadow Parts
CSSカスタムプロパティ
プロパティ
disabled
Description | If true , the user cannot interact with the segment button. |
Attribute | disabled |
Type | boolean |
Default | false |
layout
Description | Set the layout of the text and icon in the segment. |
Attribute | layout |
Type | "icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined |
Default | 'icon-top' |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
type
Description | The type of the button. |
Attribute | type |
Type | "button" | "reset" | "submit" |
Default | 'button' |
value
Description | The value of the segment button. |
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 | The indicator displayed on the checked segment button. |
indicator-background | The background element for the indicator displayed on the checked segment button. |
native | The native HTML button element that wraps all child elements. |
CSSカスタムプロパティ
- iOS
- MD
Name | Description |
---|---|
--background | Background of the segment button |
--background-checked | Background of the checked segment button |
--background-focused | Background of the segment button when focused with the tab key |
--background-focused-opacity | Opacity of the segment button background when focused with the tab key |
--background-hover | Background of the segment button on hover |
--background-hover-opacity | Opacity of the segment button background on hover |
--border-color | Color of the segment button border |
--border-radius | Radius of the segment button border |
--border-style | Style of the segment button border |
--border-width | Width of the segment button border |
--color | Color of the segment button |
--color-checked | Color of the checked segment button |
--color-focused | Color of the segment button when focused with the tab key |
--color-hover | Color of the segment button on hover |
--indicator-box-shadow | Box shadow on the indicator for the checked segment button |
--indicator-color | Color of the indicator for the checked segment button |
--indicator-height | Height of the indicator for the checked segment button |
--indicator-transform | Transform of the indicator for the checked segment button |
--indicator-transition | Transition of the indicator for the checked segment button |
--margin-bottom | Bottom margin of the segment button |
--margin-end | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button |
--margin-start | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button |
--margin-top | Top margin of the segment button |
--padding-bottom | Bottom padding of the segment button |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button |
--padding-top | Top padding of the segment button |
--transition | Transition of the segment button |
Name | Description |
---|---|
--background | Background of the segment button |
--background-checked | Background of the checked segment button |
--background-focused | Background of the segment button when focused with the tab key |
--background-focused-opacity | Opacity of the segment button background when focused with the tab key |
--background-hover | Background of the segment button on hover |
--background-hover-opacity | Opacity of the segment button background on hover |
--border-color | Color of the segment button border |
--border-radius | Radius of the segment button border |
--border-style | Style of the segment button border |
--border-width | Width of the segment button border |
--color | Color of the segment button |
--color-checked | Color of the checked segment button |
--color-focused | Color of the segment button when focused with the tab key |
--color-hover | Color of the segment button on hover |
--indicator-box-shadow | Box shadow on the indicator for the checked segment button |
--indicator-color | Color of the indicator for the checked segment button |
--indicator-height | Height of the indicator for the checked segment button |
--indicator-transform | Transform of the indicator for the checked segment button |
--indicator-transition | Transition of the indicator for the checked segment button |
--margin-bottom | Bottom margin of the segment button |
--margin-end | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button |
--margin-start | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button |
--margin-top | Top margin of the segment button |
--padding-bottom | Bottom padding of the segment button |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button |
--padding-top | Top padding of the segment button |
--transition | Transition of the segment button |
Slots
No slots available for this component.