介绍
nfq-react-component-checkbox 是一个用于 React 应用的复选框组件，提供多种样式和功能。
安装
使用 npm 安装：
npm install nfq-react-component-checkbox
使用
使用组件：
-- -------------------- ---- -------
------ - -------- - ---- -------------------------------
-------- ----- -
------ -
-----
--------- ------------- ----------------- -- ---------------------------------- --
------
--
-API
Checkbox
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| label | string or node | - | no | 复选框文字 |
| checked | boolean | false | no | 是否选中 |
| indeterminate | boolean | false | no | 是否半选 |
| disabled | boolean | false | no | 是否禁用 |
| onChange | function(event: object) | - | no | 当复选框状态改变时的回调函数 |
| className | string | - | no | 自定义样式类 |
| style | object | - | no | 自定义样式 |
| checkboxType | 'simple' or 'styled' | 'simple' | no | 复选框的类型，'simple' 为简单型，'styled' 为自定义样式 |
| checkboxColor | 'primary' or 'secondary' | 'primary' | no | 复选框的颜色，'primary' 为主色，'secondary' 为次色 |
| checkboxSize | 'small', 'medium', 'large' | 'medium' | no | 复选框的尺寸 |
| checkboxShape | 'square', 'rounded', 'round' | 'square' | no | 复选框的形状 |
| checkboxIcon | node | - | no | 自定义复选框图标 |
| checkboxIconChecked | node | - | no | 自定义选中状态的复选框图标 |
示例
基础用法
<Checkbox label="我是基础用法" onChange={(event) => console.log(event.target.checked)} />自定义样式
-- -------------------- ---- ------- --------- ------------------- --------------------- ------------------------- -------------------- --------------------- ------------------------------ --------------- --- ------------------------------------- -------------- --- ----------------- -- ---------------------------------- --
禁用状态
<Checkbox label="我是禁用状态的复选框" disabled />
受控组件
-- -------------------- ---- -------
-------- ----- -
----- ----------- ------------- - ----------------
----- ------------ - ------- -- -
-----------------------------------
--
------ -
-----
--------- ------------------ ------------------- ----------------------- --
------
--
-结语
nfq-react-component-checkbox 是一个实用且灵活的复选框组件，可以大大简化 React 应用中的复选框开发。希望本文对大家有所帮助，欢迎使用和反馈。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e281e8991b448e06a1