English | 简体中文
## 特性
- 支持字符串、数字和带标签的选项记录。
- 支持受控和非受控的取值流程。
- 包括键盘导航、RTL、垂直布局和禁用选项。
- 引入用于项目和标签定制的语义 `classNames` 和 `styles` 插槽。
## 安装
```bash
npm install @rc-component/segmented
```
## 使用
```tsx pure
import Segmented from '@rc-component/segmented';
import '@rc-component/segmented/assets/index.css';
export default () => (
{
console.log(value);
}}
/>
);
```
在线预览：https://segmented.react-component.vercel.app/
## 示例
运行本地 dumi 站点：
```bash
npm install
npm start
```
然后打开 `http://localhost:8000`。
## API
### Segmented
| 名称 | 类型 | 默认值 | 说明 |
| -------------- | ------------------------------------------------------------------------ | ---------------- | ---------------------------- |
| `className` | string | `''` | 附加 className。 |
| `classNames` | Partial> | - | 内部插槽的语义化 className。 |
| `defaultValue` | string \| number | 第一个选项值 | 初始选中值。 |
| `direction` | `'ltr'` \| `'rtl'` | - | 布局方向。 |
| `disabled` | boolean | false | 禁用所有选项。 |
| `itemRender` | `(node: ReactNode, info: { item: SegmentedLabeledOption }) => ReactNode` | identity | 自定义选项项渲染器。 |
| `motionName` | string | `'thumb-motion'` | 活动拇指的动画 className。 |
| `name` | string | - | 单选组名称。 |
| `onChange` | `(value: string \| number) => void` | - | 当所选值更改时触发。 |
| `options` | Array | - | 可用选项，必填。 |
| `prefixCls` | string | `'rc-segmented'` | className 前缀。 |
| `style` | React.CSSProperties | - | 根样式。 |
| `styles` | Partial> | - | 内部插槽的语义化样式。 |
| `value` | string \| number | - | 受控选中值。 |
| `vertical` | boolean | false | 垂直渲染选项。 |
其他合法的 `div` 属性会透传给根元素。
### SegmentedLabeledOption
| 名称 | 类型 | 默认值 | 说明 |
| ----------- | ---------------- | -------- | ---------------- |
| `className` | string | - | 选项 className。 |
| `disabled` | boolean | false | 禁用此选项。 |
| `label` | ReactNode | - | 展示的选项内容。 |
| `title` | string | 源自标签 | 标签的原生标题。 |
| `value` | string \| number | - | 选项值。 |
## 本地开发
```bash
npm install
npm start
npm test
npm run tsc
npm run compile
npm run build
```
dumi 站点默认运行在 `http://localhost:8000`。
## 发布
```bash
npm run prepublishOnly
```
包构建完成后，发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。
## 许可证
@rc-component/segmented 基于 [MIT](./LICENSE) 许可证发布。
Ant Design 生态的一部分。
