11<div align =" center " >
22 <h1 >@rc-component/segmented</h1 >
3- <p ><sub >Ant Design 生态的一部分。</sub ></p >
4- <img alt =" Ant Design " height =" 32 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " />
5- <p >🔘 React 分段控制器组件。</p >
3+ <p ><sub ><img alt =" Ant Design " height =" 14 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " style =" vertical-align : -0.125em ;" /> Ant Design 生态的一部分。</sub ></p >
4+ <p >🧩 React 分段控制器组件。</p >
65
76 <p >
87 <a href="https://www.npmjs.com/package/@rc-component/segmented"><img src="https://img.shields.io/npm/v/@rc-component/segmented.svg?style=flat-square" alt="npm version" /></a>
1918
2019## 特性
2120
22- - 支持 string, number, and labeled option records.
23- - 提供 controlled and uncontrolled value flows.
24- - Includes keyboard navigation, RTL, vertical layout, and disabled options.
25- - 暴露 semantic ` classNames ` and ` styles ` slots for item and label customization.
21+ - 支持字符串、数字和带标签的选项记录。
22+ - 提供受控和不受控的价值流。
23+ - 包括键盘导航、 RTL、垂直布局和禁用选项。
24+ - 引入用于项目和标签定制的语义 ` classNames ` 和 ` styles ` 插槽。
2625
2726## 安装
2827
@@ -47,41 +46,41 @@ export default () => (
4746);
4847```
4948
50- Online preview: https://segmented.react-component.vercel.app/
49+ 在线预览: https://segmented.react-component.vercel.app/
5150
5251## API
5352
5453### Segmented
5554
5655| 名称 | 类型 | 默认值 | 说明 |
5756| --- | --- | --- | --- |
58- | ` className ` | string | ` '' ` | Additional class name. |
59- | ` classNames ` | Partial<Record<'item' \| 'label', string >> | - | Semantic class names for internal slots. |
60- | ` defaultValue ` | string \| number | first option value | Initial selected value. |
57+ | ` className ` | string | ` '' ` | 附加className。 |
58+ | ` classNames ` | 部分<记录<'项目' \| '标签',字符串 >> | - | 内部插槽的语义化 className。 |
59+ | ` defaultValue ` | string \| number | 第一个选项值 | 初始选中值。 |
6160| ` direction ` | ` 'ltr' ` \| ` 'rtl' ` | - | Layout direction. |
62- | ` disabled ` | boolean | false | Disable all options. |
63- | ` itemRender ` | ` (node: ReactNode, info: { item: SegmentedLabeledOption }) => ReactNode ` | identity | Custom option item renderer. |
64- | ` motionName ` | string | ` 'thumb-motion' ` | Motion class name for the active thumb. |
61+ | ` disabled ` | boolean | false | 禁用所有选项。 |
62+ | ` itemRender ` | ` (node: ReactNode, info: { item: SegmentedLabeledOption }) => ReactNode ` | identity | 自定义选项项渲染器。 |
63+ | ` motionName ` | string | ` 'thumb-motion' ` | 活动拇指的运动className称。 |
6564| ` name ` | string | - | Radio group name. |
66- | ` onChange ` | ` (value: string \| number) => void ` | - | Triggered when the selected value changes. |
67- | ` options ` | Array<string \| number \| SegmentedLabeledOption> | - | Available options. Required. |
68- | ` prefixCls ` | string | ` 'rc-segmented' ` | Prefix class name. |
69- | ` style ` | React.CSSProperties | - | Root style. |
70- | ` styles ` | Partial<Record<'item' \| 'label', React.CSSProperties>> | - | Semantic styles for internal slots. |
71- | ` value ` | string \| number | - | Controlled selected value. |
72- | ` vertical ` | boolean | false | Render options vertically. |
65+ | ` onChange ` | ` (value: string \| number) => void ` | - | 当所选值更改时触发。 |
66+ | ` options ` | Array<string \| number \| SegmentedLabeledOption> | - | 可用选项,必填。 |
67+ | ` prefixCls ` | string | ` 'rc-segmented' ` | 前缀className。 |
68+ | ` style ` | React.CSSProperties | - | 根样式。 |
69+ | ` styles ` | 部分<记录<'项目' \| '标签', React.CSSProperties>> | - | 内部插槽的语义化样式。 |
70+ | ` value ` | string \| number | - | 受控选中值。 |
71+ | ` vertical ` | boolean | false | 垂直渲染选项。 |
7372
74- Additional valid ` div ` props are passed to the root element.
73+ 其他合法的 ` div ` 属性会透传给根元素。
7574
7675### SegmentedLabeledOption
7776
7877| 名称 | 类型 | 默认值 | 说明 |
7978| --- | --- | --- | --- |
80- | ` className ` | string | - | Option class name. |
81- | ` disabled ` | boolean | false | Disable this option. |
82- | ` label ` | ReactNode | - | Displayed option content. |
83- | ` title ` | string | derived from label | Native title for the label. |
84- | ` value ` | string \| number | - | Option value. |
79+ | ` className ` | string | - | 选项className称。 |
80+ | ` disabled ` | boolean | false | 禁用此选项。 |
81+ | ` label ` | ReactNode | - | 展示的选项内容。 |
82+ | ` title ` | string | 源自标签 | 标签的原生标题。 |
83+ | ` value ` | string \| number | - | 选项值。 |
8584
8685## 本地开发
8786
@@ -100,8 +99,8 @@ npm run build
10099npm run prepublishOnly
101100```
102101
103- The release flow is handled by ` @rc-component/np ` through the ` rc-np ` command after the package build.
102+ 包构建完成后,发布流程由 ` @rc-component/np ` 通过 ` rc-np ` 命令处理。
104103
105104## 许可证
106105
107- @rc-component/segmented is released under the [ MIT] ( ./LICENSE.md ) license.
106+ @rc-component/segmented 基于 [ MIT] ( ./LICENSE.md ) 许可证发布。
0 commit comments