ion-segment
段显示一组相关的按钮，有时称为分段控件，位于水平行中。它们可以显示在工具栏或主要内容内。
它们的功能类似于选项卡，选择一个会取消选择所有其他选项。段对于在内容内的不同视图之间切换很有用。如果单击控件应该在页面之间导航，则应使用选项卡而不是段。
基本用法
段由 段按钮 组成，每个按钮都有一个 value 属性。将 value 属性设置为与按钮的值匹配的值，以选择该按钮。段也可以被禁用以阻止用户与它们交互。
可滚动段
段默认情况下不可滚动。每个段按钮都有一个固定宽度，该宽度由段按钮的数量除以屏幕宽度确定。这确保每个段按钮都可以在屏幕上显示，而无需滚动。因此，一些带有较长标签的段按钮可能会被截断。为了避免这种情况，我们建议要么使用较短的标签，要么通过将 scrollable 属性设置为 true 切换到可滚动段。这会导致段水平滚动，但将允许每个段按钮具有可变宽度。
工具栏中的段
可滑动段
每个 段按钮 都可以与一个 段内容 元素关联，该元素在段处于活动状态时将被显示。使用这种方法，可以滑动或滚动每个段的内容，段将更新以反映当前可见的内容。
如果使用可滑动段时未将初始 value 分配给 ion-segment，则段将默认为第一个段按钮的值。
段按钮在与可滑动段一起使用时无法禁用。
主题
颜色
CSS 自定义属性
可访问性
键盘交互
该组件完全支持键盘，用于在 ion-segment-button 元素之间导航和选择它们。默认情况下，键盘导航只会聚焦 ion-segment-button 元素，但是可以使用 selectOnFocus 属性来确保它们在聚焦时也会被选中。下表详细说明了每个键的作用
| 键 | 描述 |
|---|---|
| ArrowRight | 聚焦下一个可聚焦元素。 |
| ArrowLeft | 聚焦上一个可聚焦元素。 |
| Home | 聚焦第一个可聚焦元素。 |
| End | 聚焦最后一个可聚焦元素。 |
| Space 或 Enter | 选择当前聚焦的元素。 |
接口
SegmentChangeEventDetail
interface SegmentChangeEventDetail {
value?: string;
}
SegmentCustomEvent
虽然不是必需的，但此接口可以用于代替 CustomEvent 接口，以使用从该组件发出的 Ionic 事件进行更强的类型化。
interface SegmentCustomEvent extends CustomEvent {
target: HTMLIonSegmentElement;
detail: SegmentChangeEventDetail;
}
属性
color
| 描述 | 要从应用程序的调色板中使用的颜色。默认选项是："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium" 和 "dark"。有关颜色的更多信息，请参阅 主题。 |
| 属性 | color |
| 类型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| 默认值 | undefined |
disabled
| 描述 | 如果为 true，则用户无法与段交互。 |
| 属性 | disabled |
| 类型 | boolean |
| 默认值 | false |
mode
| 描述 | 模式决定使用哪个平台样式。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
scrollable
| 描述 | 如果为 true，则段按钮将溢出，用户可以滑动查看它们。此外，这将禁用在按钮之间拖动指示器的手势，以便滑动查看隐藏的按钮。 |
| 属性 | scrollable |
| 类型 | boolean |
| 默认值 | false |
selectOnFocus
| 描述 | 如果为 true，则使用键盘导航到 ion-segment-button 将聚焦并选择该元素。如果为 false，则键盘导航只会聚焦 ion-segment-button 元素。 |
| 属性 | select-on-focus |
| 类型 | boolean |
| 默认值 | false |
swipeGesture
| 描述 | 如果为 true，用户将能够在段按钮之间滑动以激活它们。 |
| 属性 | swipe-gesture |
| 类型 | boolean |
| 默认值 | true |
value
| 描述 | 段的值。 |
| 属性 | value |
| 类型 | number ｜ string ｜ undefined |
| 默认值 | undefined |
事件
| 名称 | 描述 | 冒泡 |
|---|---|---|
ionChange | 当 value 属性发生变化并且任何拖动指针已从 ion-segment 释放时发出。当以编程方式设置 value 属性时，此事件不会发出。 | true |
方法
此组件没有公开方法可用。
CSS 阴影部分
此组件没有 CSS 阴影部分可用。
CSS 自定义属性
- iOS
- MD
| 名称 | 描述 |
|---|---|
--background | 段按钮的背景 |
| 名称 | 描述 |
|---|---|
--background | 段按钮的背景 |
插槽
此组件没有插槽可用。