特性

• 支持字符串、数字和带标签的选项记录。
• 支持受控和非受控的取值流程。
• 包括键盘导航、RTL、垂直布局和禁用选项。
• 引入用于项目和标签定制的语义 classNames 和 styles 插槽。

安装

npm install @rc-component/segmented

使用

import Segmented from '@rc-component/segmented';
import '@rc-component/segmented/assets/index.css';

export default () => (
  <Segmented
    options={['Daily', 'Weekly', 'Monthly']}
    defaultValue="Weekly"
    onChange={(value) => {
      console.log(value);
    }}
  />
);

在线预览：https://segmented.react-component.vercel.app/

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

Segmented

| 名称 | 类型 | 默认值 | 说明 | | -------------- | ------------------------------------------------------------------------ | ---------------- | ---------------------------- | | className | string | '' | 附加 className。 | | classNames | Partial<Record<'item' | 'label', string>> | - | 内部插槽的语义化 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<string | number | SegmentedLabeledOption> | - | 可用选项，必填。 | | prefixCls | string | 'rc-segmented' | className 前缀。 | | style | React.CSSProperties | - | 根样式。 | | styles | Partial<Record<'item' | 'label', React.CSSProperties>> | - | 内部插槽的语义化样式。 | | value | string | number | - | 受控选中值。 | | vertical | boolean | false | 垂直渲染选项。 |

其他合法的 div 属性会透传给根元素。

SegmentedLabeledOption

| 名称 | 类型 | 默认值 | 说明 | | ----------- | ---------------- | -------- | ---------------- | | className | string | - | 选项 className。 | | disabled | boolean | false | 禁用此选项。 | | label | ReactNode | - | 展示的选项内容。 | | title | string | 源自标签 | 标签的原生标题。 | | value | string | number | - | 选项值。 |

本地开发

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

dumi 站点默认运行在 http://localhost:8000。

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/segmented 基于 MIT 许可证发布。