分段控件组件

shadow

分段控件（Segment）以水平行形式显示一组相关的按钮，有时也称为分段控件。它们可以显示在工具栏或主要内容区域内。

它们的功能类似于标签页（tabs），选择其中一个会取消选择其他所有选项。分段控件适用于在内容区域内切换不同视图。当点击控件需要在页面之间导航时，应使用标签页而非分段控件。

基本用法

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

可滚动的分段控件

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

工具栏中的分段控件

可滑动切换的分段控件

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

注意

当使用可滑动切换的分段控件时，如果未给 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

Description	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.
Attribute	color
Type	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
Default	undefined

disabled

Description	If true, the user cannot interact with the segment.
Attribute	disabled
Type	boolean
Default	false

mode

Description	The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

scrollable

Description	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.
Attribute	scrollable
Type	boolean
Default	false

selectOnFocus

Description	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.
Attribute	select-on-focus
Type	boolean
Default	false

swipeGesture

Description	If true, users will be able to swipe between segment buttons to activate them.
Attribute	swipe-gesture
Type	boolean
Default	true

value

Description	the value of the segment.
Attribute	value
Type	number ｜ string ｜ undefined
Default	undefined

事件

Name	Description	Bubbles
ionChange	Emitted 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

方法

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

iOS

Name	Description
--background	Background of the segment button

MD

Name	Description
--background	Background of the segment button

插槽

No slots available for this component.