# 分段控制器 Segmented

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/segmented
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

分段控制器。自 `antd-mobile@5.38.0` 版本开始提供该组件。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

分段控制器。自 `antd-mobile@5.38.0` 版本开始提供该组件。

## 何时使用

- 用于展示多个选项并允许用户选择其中单个选项；
- 当切换选中选项时，关联区域的内容会发生变化。

## 示例

## Segmented

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| block | 将宽度调整为父元素宽度的选项 | boolean | false |
| defaultValue | 默认选中的值 | string \| number |  |
| disabled | 是否禁用 | boolean | false |
| onChange | 选项变化时的回调函数 | function(value: string \| number) |  |
| options | 数据化配置选项内容 | string\[] \| number\[] \| SegmentedItemType\[] | [] |
| value | 当前选中的值 | string \| number |  |

### SegmentedItemType

| 属性      | 描述             | 类型             | 默认值 |
| --------- | ---------------- | ---------------- | ------ |
| label     | 分段项的显示文本 | ReactNode        | -      |
| value     | 分段项的值       | string \| number | -      |
| icon      | 分段项的显示图标 | ReactNode        | -      |
| disabled  | 分段项的禁用状态 | boolean          | false  |
| className | 自定义类名       | string           | -      |

### CSS 变量

| 属性 | 说明 | 默认值 |
| --- | --- | --- |
| --segmented-background | 背景色 | `var(--adm-color-fill-content)` |
| --segmented-item-color | 分段项的文本颜色 | `var(--adm-color-text-secondary)` |
| --segmented-item-selected-background | 被选中分段的背景色 | `var(--adm-color-background)` |
| --segmented-item-selected-color | 被选中分段项的文本颜色 | `var(--adm-color-text)` |
| --segmented-item-disabled-color | 禁用分段项的文本颜色 | `var(--adm-color-weak)` |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt