ion-segment

shadow

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

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

基本用法

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

可滚动的分段控件

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

工具栏中的分段控件

主题定制

颜色

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.	true

方法

No public methods available for this component.

CSS 影子部件

No CSS shadow parts available for this component.

CSS 自定义属性

Name	Description
--background	Background of the segment button

插槽

No slots available for this component.