Skip to content

Commit 8252c5b

Browse files
committed
docs: add Chinese README
1 parent 75577f2 commit 8252c5b

2 files changed

Lines changed: 108 additions & 0 deletions

File tree

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
</p>
1414
</div>
1515

16+
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
17+
1618

1719
## Highlights
1820

README.zh-CN.md

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<div align="center">
2+
<h1>@rc-component/segmented</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<p>🔘 React 分段控制器组件。</p>
5+
6+
<p>
7+
<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>
8+
<a href="https://www.npmjs.com/package/@rc-component/segmented"><img src="https://img.shields.io/npm/dm/@rc-component/segmented.svg?style=flat-square" alt="npm downloads" /></a>
9+
<a href="https://github.com/react-component/segmented/actions"><img src="https://github.com/react-component/segmented/actions/workflows/react-component-ci.yml/badge.svg" alt="CI" /></a>
10+
<a href="https://codecov.io/gh/react-component/segmented"><img src="https://codecov.io/gh/react-component/segmented/branch/master/graph/badge.svg" alt="Codecov" /></a>
11+
<a href="https://bundlephobia.com/package/@rc-component/segmented"><img src="https://badgen.net/bundlephobia/minzip/@rc-component/segmented" alt="bundle size" /></a>
12+
<a href="https://github.com/umijs/dumi"><img src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square" alt="dumi" /></a>
13+
</p>
14+
</div>
15+
16+
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
17+
18+
19+
## 特性
20+
21+
- 支持 string, number, and labeled option records.
22+
- 提供 controlled and uncontrolled value flows.
23+
- Includes keyboard navigation, RTL, vertical layout, and disabled options.
24+
- 暴露 semantic `classNames` and `styles` slots for item and label customization.
25+
26+
## 安装
27+
28+
```bash
29+
npm install @rc-component/segmented
30+
```
31+
32+
## 使用
33+
34+
```tsx pure
35+
import Segmented from '@rc-component/segmented';
36+
import '@rc-component/segmented/assets/index.css';
37+
38+
export default () => (
39+
<Segmented
40+
options={['Daily', 'Weekly', 'Monthly']}
41+
defaultValue="Weekly"
42+
onChange={(value) => {
43+
console.log(value);
44+
}}
45+
/>
46+
);
47+
```
48+
49+
Online preview: https://segmented.react-component.vercel.app/
50+
51+
## API
52+
53+
### Segmented
54+
55+
| 名称 | 类型 | 默认值 | 说明 |
56+
| --- | --- | --- | --- |
57+
| `className` | string | `''` | Additional class name. |
58+
| `classNames` | Partial<Record<'item' \| 'label', string>> | - | Semantic class names for internal slots. |
59+
| `defaultValue` | string \| number | first option value | Initial selected value. |
60+
| `direction` | `'ltr'` \| `'rtl'` | - | Layout direction. |
61+
| `disabled` | boolean | false | Disable all options. |
62+
| `itemRender` | `(node: ReactNode, info: { item: SegmentedLabeledOption }) => ReactNode` | identity | Custom option item renderer. |
63+
| `motionName` | string | `'thumb-motion'` | Motion class name for the active thumb. |
64+
| `name` | string | - | Radio group name. |
65+
| `onChange` | `(value: string \| number) => void` | - | Triggered when the selected value changes. |
66+
| `options` | Array<string \| number \| SegmentedLabeledOption> | - | Available options. Required. |
67+
| `prefixCls` | string | `'rc-segmented'` | Prefix class name. |
68+
| `style` | React.CSSProperties | - | Root style. |
69+
| `styles` | Partial<Record<'item' \| 'label', React.CSSProperties>> | - | Semantic styles for internal slots. |
70+
| `value` | string \| number | - | Controlled selected value. |
71+
| `vertical` | boolean | false | Render options vertically. |
72+
73+
Additional valid `div` props are passed to the root element.
74+
75+
### SegmentedLabeledOption
76+
77+
| 名称 | 类型 | 默认值 | 说明 |
78+
| --- | --- | --- | --- |
79+
| `className` | string | - | Option class name. |
80+
| `disabled` | boolean | false | Disable this option. |
81+
| `label` | ReactNode | - | Displayed option content. |
82+
| `title` | string | derived from label | Native title for the label. |
83+
| `value` | string \| number | - | Option value. |
84+
85+
## 本地开发
86+
87+
```bash
88+
npm install
89+
npm start
90+
npm test
91+
npm run tsc
92+
npm run compile
93+
npm run build
94+
```
95+
96+
## 发布
97+
98+
```bash
99+
npm run prepublishOnly
100+
```
101+
102+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
103+
104+
## 许可证
105+
106+
@rc-component/segmented is released under the [MIT](./LICENSE.md) license.

0 commit comments

Comments
 (0)