Segments and Tabs (段和标签页)

相关源文件

• core/src/components/segment-button/segment-button.ios.scss
• core/src/components/segment-button/segment-button.ios.vars.scss
• core/src/components/segment-button/segment-button.md.scss
• core/src/components/segment-button/segment-button.md.vars.scss
• core/src/components/segment-button/segment-button.scss
• core/src/components/segment-button/segment-button.tsx
• core/src/components/segment/segment.ios.scss
• core/src/components/segment/segment.md.scss
• core/src/components/segment/segment.md.vars.scss
• core/src/components/segment/segment.scss
• core/src/components/segment/segment.tsx
• core/src/components/segment/test/basic/index.html
• core/src/components/segment/test/custom/index.html
• core/src/utils/helpers.ts

此页面介绍如何在应用程序中使用 Ionic 的 Segment 和 Tab 组件来组织内容和导航。Segments 提供水平控件，用于在不同视图之间进行选择，而 Tabs 则将内容组织到可独立导航的部分中。

有关通用导航组件的更多信息，请参阅 导航组件。

组件概览

Segments 和 Tabs 在 Ionic UI 生态系统中扮演着不同但互补的角色。

• Segments（ion-segment）提供了一个水平选择控件，允许用户在多个选项之间进行选择，通常用于过滤内容或在同一页面内切换视图。
• Tabs（与 segments 一起使用）提供了一种将内容组织到用户可以导航的不同部分的方法。

来源：core/src/components/segment/segment.tsx core/src/components/segment-button/segment-button.tsx

Segment Component

The ion-segment component is a horizontal control that provides a way to select between multiple options. It consists of multiple ion-segment-button elements.

主要功能

• Value Binding: Segments maintain a value property that corresponds to the selected segment button
• Scrollable Layout: Can display many options with horizontal scrolling
• Swipe Gestures: Users can swipe between options (can be disabled)
• Indicator Animation: Visual feedback shows the selected option
• Keyboard Navigation: Full keyboard support for accessibility

基本用法

Sources: core/src/components/segment/test/basic/index.html24-36

核心属性

属性	类型	默认	描述
value	字符串	-	The value of the selected segment button
disabled	布尔值	false	Whether user interaction is disabled
scrollable	布尔值	false	Whether segment buttons will overflow and can be scrolled
swipeGesture	布尔值	true	Whether users can swipe between segment buttons
selectOnFocus	布尔值	false	Whether keyboard navigation selects buttons (vs just focus)
color	字符串	-	The color to use from your application's color palette

Sources: core/src/components/segment/segment.tsx49-133

事件

事件	描述
ionChange	Emitted when the value property has changed from user interaction
ionSelect	Emitted when the value of the segment changes (internal event)

Sources: core/src/components/segment/segment.tsx139-154

Segment Button Component

The ion-segment-button is a child component of ion-segment that represents a selectable option.

Sources: core/src/components/segment-button/segment-button.tsx core/src/components/segment-button/segment-button.scss234-261

核心属性

属性	类型	默认	描述
value	字符串	auto-generated	The value of the segment button
disabled	布尔值	false	Whether the segment button is disabled
layout	字符串	"icon-top"	Layout for icon and label placement
contentId	字符串	-	The ID of the segment content to display when selected
类型	字符串	"button"	The type of the underlying button element

Sources: core/src/components/segment-button/segment-button.tsx40-63

布局选项

Segment buttons support different layouts for positioning icons and labels

• icon-top: Icon above the label (default)
• icon-start: Icon to the left of the label
• icon-end: Icon to the right of the label
• icon-bottom: Icon below the label
• icon-hide: No icon, only label
• label-hide: No label, only icon

Sources: core/src/components/segment-button/segment-button.scss234-261 core/src/components/segment-button/segment-button.ios.scss7-47 core/src/components/segment-button/segment-button.md.scss7-26

Integration with Content Views

Segments can control content views using the contentId attribute to connect segment buttons with specific content.

Segment-Content Connection

Sources: core/src/components/segment/segment.tsx369-377 core/src/components/segment/segment.tsx420-435

工作原理

1. Each ion-segment-button has an optional contentId property
2. When a button is selected, the segment finds the corresponding content element with a matching ID
3. The segment view's content is updated to show the selected content
4. This creates a tab-like navigation experience without needing to use the formal tab components

Sources: core/src/components/segment/segment.tsx420-435

Scrollable Segments

For segments with many options, you can enable horizontal scrolling

The scrollable property enables

• Horizontal scrolling for many options
• Automatic centering of the active segment button
• Smooth scrolling animation to show the selected button

Sources: core/src/components/segment/test/basic/index.html39-58 core/src/components/segment/segment.tsx437-499

Styling and Customization

Segments support Ionic's color system and custom CSS properties for extensive customization.

Color Property

CSS 自定义属性

Segment buttons expose many CSS variables for customization

CSS 属性	描述
--background	Background of the segment button
--background-checked	Background of the checked segment button
--color	Color of the segment button
--color-checked	Color of the checked segment button
--indicator-color	Color of the indicator for the checked segment button
--indicator-height	Height of the indicator for the checked segment button
--border-radius	Radius of the segment button border

Sources: core/src/components/segment-button/segment-button.scss7-44 core/src/components/segment-button/segment-button.ios.scss7-47 core/src/components/segment-button/segment-button.md.scss7-26

平台特定行为

Segments adapt to both iOS and Material Design platforms

iOS

• More rounded appearance
• Uses a background indicator that highlights the entire button
• Includes borders between buttons when not selected

Material Design

• Flatter appearance
• Uses an underline indicator
• More subtle visual transitions
• Implements Material Design ripple effects

来源： core/src/components/segment/segment.ios.scss core/src/components/segment/segment.md.scss core/src/components/segment-button/segment-button.ios.scss core/src/components/segment-button/segment-button.md.scss

Segment 和标签页导航模式

虽然 Segment 可以独立工作，但它们通常与基于标签页的导航模式结合使用

独立 Segment

• 用于过滤单页内容
• 用于在同一上下文内切换不同的视图
• 用于提供同一数据的不同视角

带标签页的 Segment

• Segment 可以控制哪个标签页可见
• 每个 Segment 按钮对应一个特定的标签页
• 创建统一的导航体验

来源： core/src/components/segment/segment.tsx368-377

手势支持

Segment 支持手势交互

1. 滑动（Swipe）手势：用户可以水平滑动 Segment 按钮
2. 拖动（Drag）手势：用户可以拖动 Segment 指示器在选项之间切换
3. 点击（Tap）手势：标准的选项点击选择

可以通过 `swipeGesture` 属性禁用手势支持，以备不时之需。

来源： core/src/components/segment/segment.tsx79-84 core/src/components/segment/segment.tsx209-228 core/src/components/segment/segment.tsx230-254

无障碍功能

Segments 实现了完善的可访问性功能

• Segment 具有 `role="tablist"` 角色
• Segment 按钮具有 `role="tab"` 角色
• `aria-selected` 状态反映当前选择
• 全面的键盘导航支持
• 选择更改期间的焦点管理

来源： core/src/components/segment/segment.tsx707-722 core/src/components/segment-button/segment-button.tsx183-197 core/src/components/segment/segment.tsx659-702

最佳实践

• 使用 Segment 切换相关的视图内容
• 保持 Segment 按钮标签简短且具有描述性
• 考虑使用图标来强化 Segment 按钮的含义
• 对于许多选项，启用可滚动 Segment
• 测试键盘导航以确保可访问性
• 集成内容视图时，请确保 `contentIds` 匹配正确

来源： core/src/components/segment/test/basic/index.html core/src/components/segment/test/custom/index.html