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，则该段将默认为第一个段按钮的值。
¥If no initial value is assigned to the ion-segment when using swipeable segments, the segment will default to the value of the first segment button.
与可滑动段一起使用时，无法禁用段按钮。
¥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 元素。默认情况下，键盘导航将仅聚焦 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. |
| 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.