Skip to content

Commit 8a14a22

Browse files
committed
docs: add Chinese README
1 parent 51519b8 commit 8a14a22

2 files changed

Lines changed: 131 additions & 0 deletions

File tree

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<p>☑️ A small, accessible checkbox primitive for React.</p>
55
</div>
66

7+
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
8+
79

810
<div align="center">
911

README.zh-CN.md

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<div align="center">
2+
<h1>@rc-component/checkbox</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<p>☑️ 轻量、可访问的 React 复选框基础组件。</p>
5+
</div>
6+
7+
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
8+
9+
10+
<div align="center">
11+
12+
[![NPM version][npm-image]][npm-url]
13+
[![npm download][download-image]][download-url]
14+
[![build status][github-actions-image]][github-actions-url]
15+
[![Codecov][codecov-image]][codecov-url]
16+
[![bundle size][bundlephobia-image]][bundlephobia-url]
17+
[![dumi][dumi-image]][dumi-url]
18+
19+
</div>
20+
21+
[npm-image]: https://img.shields.io/npm/v/@rc-component/checkbox.svg?style=flat-square
22+
[npm-url]: https://npmjs.org/package/@rc-component/checkbox
23+
[github-actions-image]: https://github.com/react-component/checkbox/actions/workflows/main.yml/badge.svg
24+
[github-actions-url]: https://github.com/react-component/checkbox/actions/workflows/main.yml
25+
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/checkbox/master.svg?style=flat-square
26+
[codecov-url]: https://app.codecov.io/gh/react-component/checkbox
27+
[download-image]: https://img.shields.io/npm/dm/@rc-component/checkbox.svg?style=flat-square
28+
[download-url]: https://npmjs.org/package/@rc-component/checkbox
29+
[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/%40rc-component%2Fcheckbox?style=flat-square
30+
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/checkbox
31+
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
32+
[dumi-url]: https://github.com/umijs/dumi
33+
34+
## 特性
35+
36+
- 可 as a controlled or uncontrolled checkbox.
37+
- 暴露 an imperative ref for focus, blur, and DOM access.
38+
- 保留 native input attributes available while normalizing the change event.
39+
- 提供编译后的 JavaScript、TypeScript 类型定义和独立 CSS 资源。
40+
41+
## 安装
42+
43+
```bash
44+
npm install @rc-component/checkbox
45+
```
46+
47+
## 使用
48+
49+
```tsx
50+
import Checkbox from '@rc-component/checkbox';
51+
import '@rc-component/checkbox/assets/index.css';
52+
53+
export default function App() {
54+
return (
55+
<Checkbox
56+
defaultChecked
57+
onChange={(event) => {
58+
console.log(event.target.checked);
59+
}}
60+
/>
61+
);
62+
}
63+
```
64+
65+
## 示例
66+
67+
```bash
68+
npm install
69+
npm start
70+
```
71+
72+
然后打开 `http://localhost:8000`
73+
74+
在线演示: https://react-component.github.io/checkbox/
75+
76+
## API
77+
78+
### Checkbox
79+
80+
| 参数 | 说明 | 类型 | 默认值 |
81+
| -------------- | ------------------------------------------ | -------------------------------------- | ------------- |
82+
| checked | Whether the checkbox is checked | boolean | - |
83+
| className | Additional class name | string | - |
84+
| defaultChecked | Whether the checkbox is checked by default | boolean | false |
85+
| disabled | Whether the checkbox is disabled | boolean | false |
86+
| name | Same as native checkbox input `name` | string | - |
87+
| prefixCls | Component class name prefix | string | `rc-checkbox` |
88+
| style | Inline style for the wrapper | `React.CSSProperties` | - |
89+
| type | Native input type | string | `checkbox` |
90+
| value | Same as native checkbox input `value` | string \| number \| readonly string[] | - |
91+
| onChange | Callback when checked state changes | `(event: CheckboxChangeEvent) => void` | - |
92+
93+
Other native input attributes are also supported.
94+
95+
### Ref
96+
97+
| 参数 | 说明 | 类型 |
98+
| ------------- | ------------------------------ | ---------------------------------- |
99+
| blur | Remove focus from the checkbox | `() => void` |
100+
| focus | Focus the checkbox | `(options?: FocusOptions) => void` |
101+
| input | Native input element | `HTMLInputElement \| null` |
102+
| nativeElement | Wrapper element | `HTMLElement \| null` |
103+
104+
## 本地开发
105+
106+
```bash
107+
npm install
108+
npm start
109+
```
110+
111+
```bash
112+
npm test
113+
npm run tsc
114+
npm run lint
115+
npm run compile
116+
npm run build
117+
```
118+
119+
## 发布
120+
121+
```bash
122+
npm run prepublishOnly
123+
```
124+
125+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
126+
127+
## 许可证
128+
129+
@rc-component/checkbox is released under the [MIT](./LICENSE.md) license.

0 commit comments

Comments
 (0)