跳到主要内容
版本：v8

ion-segment

shadow

分段控件在一行中显示一组相关按钮，有时称为分段控件。它们可以显示在工具栏内部或主要内容中。

其功能类似于选项卡，选择一个会取消选择所有其他选项。分段控件在内容内部切换不同视图时非常有用。当点击控件应在页面之间导航时，应使用选项卡而不是分段控件。

基本用法​

分段控件由 segment 按钮组成，每个按钮都有一个 value 属性。在分段控件上设置 value 属性以匹配某个按钮的值来选择该按钮。分段控件也可以被禁用，以防止用户与其交互。

可滚动的分段控件​

默认情况下，分段控件不可滚动。每个分段按钮都有固定宽度，宽度由屏幕宽度除以分段按钮数量决定。这确保了每个分段按钮都可以显示在屏幕上而无需滚动。因此，一些标签较长的分段按钮可能会被截断。为了避免这种情况，我们建议使用较短的标签，或者通过将 scrollable 属性设置为 true 来切换到可滚动的分段控件。这将使分段控件水平滚动，但允许每个分段按钮具有可变宽度。

工具栏中的分段控件​

可滑动分段控件​

每个分段按钮可以与一个分段内容元素关联，该元素将在分段激活时显示。 通过这种方式，每个分段的内容可以在之间滑动或滚动，并且分段控件会更新 以反映当前可见的内容。

注意

在使用可滑动分段控件时，如果没有为 ion-segment 分配初始 value，分段控件将默认为第一个分段按钮的值。

可滑动分段控件中不能禁用分段按钮。

主题​

颜色​

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​

说明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说明冒泡
ionChangeEmitted when the value property has changed and any dragging pointer has been released from ion-segment.

This event will not emit when programmatically setting the value property.		true

方法​

该组件没有可用的公共方法。

CSS Shadow Parts​

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性​

Name说明
--backgroundBackground of the segment button

插槽​

该组件没有可用的插槽。

目录

编辑此页