ion-segment
分段显示一组相关按钮，有时称为分段控件，排列在一行中。它们可以显示在工具栏或主内容中。
🌐 Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content.
它们的功能类似于选项卡，选择一个将取消选择所有其他选项。分段控件对于在内容内部切换不同视图非常有用。当点击一个控件应在页面之间导航时，应使用选项卡而不是分段控件。
🌐 Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.
基本用法
🌐 Basic Usage
分段由带有每个按钮的 value 属性的 分段按钮 组成。在分段上设置 value 属性以匹配某个按钮的值，从而选择该按钮。分段也可以被禁用，以防止用户与其交互。
🌐 Segments consist of segment buttons with a value property on each button. Set the value property on the segment to match the value of a button to select that button. Segments can also be disabled to prevent users from interacting with them.
可滚动段
🌐 Scrollable Segments
分段默认情况下不可滚动。每个分段按钮都有固定宽度，宽度由分段按钮的数量除以屏幕宽度来确定。这确保每个分段按钮可以显示在屏幕上，无需滚动。因此，某些标签较长的分段按钮可能会被截断。为避免这种情况，我们建议使用较短的标签，或通过将 scrollable 属性设置为 true 来切换为可滚动的分段。这样分段将水平滚动，但可以让每个分段按钮具有可变宽度。
🌐 Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the scrollable property to true. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width.
工具栏中的段
🌐 Segments in Toolbars
可滑动片段
🌐 Swipeable Segments
每个分段按钮都可以与一个分段内容元素关联，当该分段处于活动状态时会显示该元素。通过这种方式，每个分段的内容可以进行滑动或滚动切换，并且分段会更新以反映当前可见的内容。
🌐 Each segment button can be associated with a segment content element that will be displayed when the segment is active. With this approach, each segment's content can be swiped or scrolled between and the segment will be updated to reflect the currently visible content.
如果在使用可滑动分段控件时没有为 ion-segment 分配初始的 value，该分段将默认为第一个分段按钮的值。
当与可滑动分段一起使用时，分段按钮无法被禁用。
🌐 Segment buttons cannot be disabled when used with swipeable segments.
主题化
🌐 Theming
颜色
🌐 Colors
CSS 自定义属性
🌐 CSS Custom Properties
无障碍
🌐 Accessibility
键盘交互
🌐 Keyboard Interactions
该组件完全支持使用键盘在 ion-segment-button 元素之间导航和选择。默认情况下，键盘导航只会聚焦 ion-segment-button 元素，但你可以使用 selectOnFocus 属性来确保它们在获得焦点时也被选中。下表详细说明了每个按键的作用：
🌐 The component has full keyboard support for navigating between and selecting ion-segment-button elements. By default, keyboard navigation will only focus ion-segment-button elements, but you can use the selectOnFocus property to ensure that they get selected on focus as well. The following table details what each key does:
| 键 | 描述 |
|---|---|
| ArrowRight | 聚焦下一个可聚焦的元素。 |
| ArrowLeft | 聚焦上一个可聚焦的元素。 |
| Home | 聚焦第一个可聚焦的元素。 |
| End | 聚焦最后一个可聚焦的元素。 |
| Space 或 Enter | 选择当前聚焦的元素。 |
接口
🌐 Interfaces
SegmentChangeEventDetail
interface SegmentChangeEventDetail {
value?: string;
}
SegmentCustomEvent
虽然不是必需的，但可以使用此接口替代 CustomEvent 接口，以便对从此组件发出的 Ionic 事件进行更强类型的处理。
🌐 While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
interface SegmentCustomEvent extends CustomEvent {
target: HTMLIonSegmentElement;
detail: SegmentChangeEventDetail;
}
属性
🌐 Properties
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 |
事件
🌐 Events
| 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 |
方法
🌐 Methods
No public methods available for this component.
CSS 阴影部分
🌐 CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
🌐 CSS Custom Properties
- iOS
- MD
| Name | Description |
|---|---|
--background | Background of the segment button |
| Name | Description |
|---|---|
--background | Background of the segment button |
插槽
🌐 Slots
No slots available for this component.