ion-segment-button
分段按钮是分段控件内的一组相关按钮。它们以水平行显示。通过将分段控件的 value 设置为分段按钮的 value，可以默认选中某个分段按钮。一次只能选中一个分段按钮。
基本用法
布局
layout 属性默认为 "icon-top"。当分段按钮同时具有图标和标签时，它会在标签上方显示图标。可以通过将 layout 属性设置为 "icon-bottom"、"icon-start" 或 "icon-end" 来改变此行为，这会分别将图标显示在标签下方、标签开始位置（LTR 中为左侧，RTL 中为右侧）或标签结束位置（LTR 中为右侧，RTL 中为左侧）。
主题
CSS Shadow Parts
CSS 自定义属性
属性
contentId
| 说明 | The id of the segment content. |
| 属性 | content-id |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
disabled
| 说明 | If true, the user cannot interact with the segment button. |
| 属性 | disabled |
| 类型 | boolean |
| 默认值 | false |
layout
| 说明 | Set the layout of the text and icon in the segment. |
| 属性 | layout |
| 类型 | "icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined |
| 默认值 | 'icon-top' |
mode
| 说明 | The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
type
| 说明 | The type of the button. |
| 属性 | type |
| 类型 | "button" ｜ "reset" ｜ "submit" |
| 默认值 | 'button' |
value
| 说明 | The value of the segment button. |
| 属性 | value |
| 类型 | number ｜ string |
| 默认值 | 'ion-sb-' + ids++ |
事件
该组件没有可用的事件。
方法
该组件没有可用的公共方法。
CSS Shadow Parts
| Name | 说明 |
|---|---|
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 | 说明 |
|---|---|
--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 | 说明 |
|---|---|
--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 |
插槽
该组件没有可用的插槽。