ion-segment
分段控件（Segment）在水平行中显示一组相关按钮，有时称为分段控件。它们可以显示在工具栏内部或主要内容中。
其功能类似于标签，选择一个将取消选择所有其他选项。分段控件对于在内容中的不同视图之间切换很有用。当点击控件应在页面之间导航时，应使用标签而不是分段控件。
基本用法
分段控件由分段按钮（segment button）组成，每个按钮都有一个 value 属性。将分段控件上的 value 属性设置为与按钮的值匹配，以选择该按钮。分段控件也可以禁用，以防止用户与其交互。
可滚动分段控件
分段控件默认不可滚动。每个分段按钮都有固定宽度，宽度是通过分段按钮数量除以屏幕宽度来确定的。这确保每个分段按钮都可以在屏幕上显示而无需滚动。因此，一些标签较长的分段按钮可能会被截断。为了避免这种情况，我们建议使用较短的标签或通过将 scrollable 属性设置为 true 来切换到可滚动分段控件。这将导致分段水平滚动，但允许每个分段按钮具有可变宽度。
工具栏中的分段控件
主题
颜色
CSS 自定义属性
无障碍访问
键盘交互
该组件具有完整的键盘支持，用于在 ion-segment-button 元素之间导航和选择。默认情况下，键盘导航只会聚焦 ion-segment-button 元素，但你可以使用 selectOnFocus 属性确保它们在聚焦时也被选中。下表详细说明了每个键的作用：
| 键 | 描述 |
|---|---|
| 右箭头 | 聚焦下一个可聚焦元素。 |
| 左箭头 | 聚焦上一个可聚焦元素。 |
| Home | 聚焦第一个可聚焦元素。 |
| End | 聚焦最后一个可聚焦元素。 |
| Space 或 Enter | 选择当前聚焦的元素。 |
接口
SegmentChangeEventDetail
interface SegmentChangeEventDetail {
value?: string;
}
SegmentCustomEvent
虽然不是必需的，但此接口可以替代 CustomEvent 接口，为此组件发出的 Ionic 事件提供更强的类型支持。
interface SegmentCustomEvent extends CustomEvent {
target: HTMLIonSegmentElement;
detail: SegmentChangeEventDetail;
}
属性
color
| 说明 | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| 属性 | color |
| 类型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| 默认值 | undefined |
disabled
| 说明 | If true, the user cannot interact with the segment. |
| 属性 | disabled |
| 类型 | boolean |
| 默认值 | false |
mode
| 说明 | The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
scrollable
| 说明 | If true, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons. |
| 属性 | scrollable |
| 类型 | boolean |
| 默认值 | false |
selectOnFocus
| 说明 | If true, navigating to an ion-segment-button with the keyboard will focus and select the element. If false, keyboard navigation will only focus the ion-segment-button element. |
| 属性 | select-on-focus |
| 类型 | boolean |
| 默认值 | false |
swipeGesture
| 说明 | If true, users will be able to swipe between segment buttons to activate them. |
| 属性 | swipe-gesture |
| 类型 | boolean |
| 默认值 | true |
value
| 说明 | the value of the segment. |
| 属性 | value |
| 类型 | number ｜ string ｜ undefined |
| 默认值 | undefined |
事件
| Name | 说明 | 冒泡 |
|---|---|---|
ionChange | Emitted when the value property has changed and any dragging pointer has been released from ion-segment. | true |
方法
该组件没有可用的公共方法。
CSS 阴影部分
该组件没有可用的 CSS 阴影部分。
CSS 自定义属性
| Name | 说明 |
|---|---|
--background | Background of the segment button |
插槽
该组件没有可用的插槽。