|
| 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