分段按钮图标与值组件
分段按钮是 segment 内的一组相关按钮，它们以水平行形式显示。通过将分段的 value 设置为分段按钮的 value，可以默认选中一个分段按钮。同一时间只能选中一个分段按钮。
基本用法
布局
layout 属性默认设置为 "icon-top"。当分段按钮同时具有图标和标签时，图标将显示在标签上方。可以通过将 layout 属性设置为 "icon-bottom"、"icon-start" 或 "icon-end" 来改变此行为，分别将图标显示在标签下方、标签起始位置（LTR 模式下为左侧，RTL 模式下为右侧）或标签结束位置（LTR 模式下为右侧，RTL 模式下为左侧）。
主题定制
CSS 影子部件
CSS 自定义属性
属性
contentId
| Description | The id of the segment content. |
| Attribute | content-id |
| Type | string ｜ undefined |
| Default | undefined |
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. 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 |
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 影子部件
| 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 |
插槽
No slots available for this component.