Skip to content

Commit c4cfedb

Browse files
afc163afc163
committed
docs: add Chinese README
1 parent 9fdfcdd commit c4cfedb

2 files changed

Lines changed: 145 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: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<div align="center">
2+
<h1>@rc-component/slider</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/slider"><img src="https://img.shields.io/npm/v/@rc-component/slider.svg?style=flat-square" alt="npm version" /></a>
8+
<a href="https://www.npmjs.com/package/@rc-component/slider"><img src="https://img.shields.io/npm/dm/@rc-component/slider.svg?style=flat-square" alt="npm downloads" /></a>
9+
<a href="https://github.com/react-component/slider/actions"><img src="https://github.com/react-component/slider/actions/workflows/react-component-ci.yml/badge.svg" alt="CI" /></a>
10+
<a href="https://codecov.io/gh/react-component/slider"><img src="https://img.shields.io/codecov/c/github/react-component/slider/master.svg?style=flat-square" alt="Codecov" /></a>
11+
<a href="https://bundlephobia.com/package/@rc-component/slider"><img src="https://badgen.net/bundlephobia/minzip/@rc-component/slider" 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+
- 支持 single-value and range sliders with one shared component.
22+
- 提供 marks, dots, keyboard interaction, reverse and vertical layouts.
23+
- 支持 editable range handles and draggable tracks through `range` config.
24+
- 暴露 semantic `classNames` and `styles` slots for tracks, rail, and handles.
25+
26+
## 安装
27+
28+
```bash
29+
npm install @rc-component/slider
30+
```
31+
32+
## 使用
33+
34+
```tsx pure
35+
import Slider from '@rc-component/slider';
36+
import '@rc-component/slider/assets/index.css';
37+
38+
export default () => <Slider defaultValue={30} />;
39+
```
40+
41+
```tsx pure
42+
import Slider from '@rc-component/slider';
43+
import '@rc-component/slider/assets/index.css';
44+
45+
export default () => (
46+
<Slider
47+
range={{ draggableTrack: true }}
48+
marks={{ 0: '0', 50: '50', 100: '100' }}
49+
defaultValue={[20, 60]}
50+
/>
51+
);
52+
```
53+
54+
Online preview: https://slider.react-component.vercel.app/
55+
56+
## API
57+
58+
### Slider
59+
60+
| 名称 | 类型 | 默认值 | 说明 |
61+
| --- | --- | --- | --- |
62+
| `activeDotStyle` | React.CSSProperties \| `(dotValue: number) => React.CSSProperties` | - | Style for active dots. |
63+
| `activeHandleRender` | `HandlesProps['handleRender']` | - | Render function for the active handle. |
64+
| `allowCross` | boolean | true | Allow handles to cross in range mode. |
65+
| `ariaLabelForHandle` | string \| string[] | - | `aria-label` for handle elements. |
66+
| `ariaLabelledByForHandle` | string \| string[] | - | `aria-labelledby` for handle elements. |
67+
| `ariaRequired` | boolean | - | `aria-required` for handle elements. |
68+
| `ariaValueTextFormatterForHandle` | `((value: number) => string) \| ((value: number) => string)[]` | - | Formatter for `aria-valuetext`. |
69+
| `autoFocus` | boolean | - | Focus the slider on mount. |
70+
| `className` | string | - | Additional class name. |
71+
| `classNames` | `Partial<Record<'tracks' \| 'track' \| 'rail' \| 'handle', string>>` | - | Semantic class names for internal slots. |
72+
| `count` | number | - | Deprecated. Use `range.minCount` or `range.maxCount`. |
73+
| `defaultValue` | number \| number[] | - | Initial value. |
74+
| `disabled` | boolean \| boolean[] | false | Disable all handles or specific handles. |
75+
| `dots` | boolean | false | Show dots at each valid step position. |
76+
| `dotStyle` | React.CSSProperties \| `(dotValue: number) => React.CSSProperties` | - | Style for dots. |
77+
| `handleRender` | `HandlesProps['handleRender']` | - | Custom handle renderer. |
78+
| `handleStyle` | React.CSSProperties \| React.CSSProperties[] | - | Deprecated. Use `styles.handle`. |
79+
| `id` | string | - | Root id. |
80+
| `included` | boolean | true | Whether the track is rendered as a continuous selected interval. |
81+
| `keyboard` | boolean | true | Enable keyboard interaction. |
82+
| `marks` | `Record<string \| number, ReactNode \| MarkObj>` | - | Slider marks. |
83+
| `max` | number | 100 | Maximum value. |
84+
| `min` | number | 0 | Minimum value. |
85+
| `onAfterChange` | `(value) => void` | - | Deprecated. Use `onChangeComplete`. |
86+
| `onBeforeChange` | `(value) => void` | - | Deprecated. Use `onChange`. |
87+
| `onBlur` | `(event) => void` | - | Blur handler. |
88+
| `onChange` | `(value) => void` | - | Triggered while value changes. |
89+
| `onChangeComplete` | `(value) => void` | - | Triggered when interaction completes. |
90+
| `onFocus` | `(event) => void` | - | Focus handler. |
91+
| `prefixCls` | string | `'rc-slider'` | Prefix class name. |
92+
| `pushable` | boolean \| number | false | Push adjacent handles in range mode. |
93+
| `railStyle` | React.CSSProperties | - | Deprecated. Use `styles.rail`. |
94+
| `range` | boolean \| RangeConfig | false | Enable range mode or configure editable range behavior. |
95+
| `reverse` | boolean | false | Render in reverse direction. |
96+
| `startPoint` | number | `min` | Start point for a single-value track. |
97+
| `step` | number \| null | 1 | Step size. Use `null` to use marks as steps. |
98+
| `style` | React.CSSProperties | - | Root style. |
99+
| `styles` | `Partial<Record<'tracks' \| 'track' \| 'rail' \| 'handle', React.CSSProperties>>` | - | Semantic styles for internal slots. |
100+
| `tabIndex` | number \| number[] | 0 | Handle tab index. |
101+
| `track` | boolean | - | Whether to render track elements. |
102+
| `trackStyle` | React.CSSProperties \| React.CSSProperties[] | - | Deprecated. Use `styles.track`. |
103+
| `value` | number \| number[] | - | Controlled value. |
104+
| `vertical` | boolean | false | Render vertically. |
105+
106+
### RangeConfig
107+
108+
| 名称 | 类型 | 默认值 | 说明 |
109+
| ---------------- | ------- | ------- | ---------------------------------------- |
110+
| `draggableTrack` | boolean | false | Allow dragging the selected range track. |
111+
| `editable` | boolean | false | Allow adding or removing range handles. |
112+
| `maxCount` | number | - | Maximum handle count when editable. |
113+
| `minCount` | number | - | Minimum handle count when editable. |
114+
115+
### Ref
116+
117+
| 名称 | 类型 | 说明 |
118+
| ------- | ------------ | ----------------- |
119+
| `blur` | `() => void` | Blur the slider. |
120+
| `focus` | `() => void` | Focus the slider. |
121+
122+
## 本地开发
123+
124+
```bash
125+
npm install
126+
npm start
127+
npm test
128+
npm run tsc
129+
npm run compile
130+
npm run build
131+
```
132+
133+
## 发布
134+
135+
```bash
136+
npm run prepublishOnly
137+
```
138+
139+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
140+
141+
## 许可证
142+
143+
@rc-component/slider is released under the [MIT](./LICENSE) license.

0 commit comments

Comments
 (0)