ion-segment-button
分段按钮是 segment 内的相关按钮组。它们显示在水平行中。通过将段的 value 设置为段按钮的 value，可以默认选择段按钮。一次只能选择一个分段按钮。
¥Segment 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.
基本用法
¥Basic Usage
布局
¥Layout
默认情况下，layout 属性设置为 "icon-top"。当分段按钮同时具有图标和标签时，它将在标签顶部显示图标。可以通过将 layout 属性设置为 "icon-bottom"、"icon-start" 或 "icon-end" 来更改此行为，这将在标签下方、标签开头（LTR 中为左侧，RTL 中为右侧）或标签末尾（右侧）显示图标 分别为 LTR 和 RTL 中的左侧）。
¥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.
主题化
¥Theming
CSS 阴影部分
¥CSS Shadow Parts
CSS 自定义属性
¥CSS Custom Properties
属性
¥Properties
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++ |
事件
¥Events
No events available for this component.
方法
¥Methods
No public methods available for this component.
CSS 阴影部分
¥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 自定义属性
¥CSS Custom Properties
| 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.