复选框
复选框在检查状态和未选中状态之间切换,使用户能够在形式和设置中作出二进制选择 .
图片参考
复选框使用
import { Checkbox } from '@dt-dds/react-checkbox';
import { useState } from 'react';
export const App = () => {
const [checked, setChecked] = useState(false);
const handleChange = (evt) => {
setChecked(evt.target.checked);
};
return (
<Checkbox checked={checked} onChange={handleChange}>
Accept terms and conditions
</Checkbox>
);
};
不确定的国家
const [checkedItems, setCheckedItems] = useState([false, false, false]);
const allChecked = checkedItems.every(Boolean);
const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
<Checkbox
checked={allChecked}
indeterminate={isIndeterminate}
onChange={(e) =>
setCheckedItems([e.target.checked, e.target.checked, e.target.checked])
}
>
Select all
</Checkbox>;
属性
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 已检查 | boolean | —— 说 | 控制选中状态 |
| 变化 | (evt: ChangeEvent<HTMLInputElement>) => void | —— 说 | 州变后调回. |
| 已失效 | boolean | false | 若为 true,复选框已禁用. |
| 不确定 | boolean | false | 若为 true,复选框以不确定状态出现. |
| 有错误 | boolean | false | 若为 true,复选框显示错误状态. |
| 大小 | 'small' | 'large' | 'large' | 复选框大小 . |
| 标签 | ReactNode | —— 说 | 要显示为标签的文本或元素 . |
| 儿童 | ReactNode | —— 说 | 提供标签内容的替代方式. |
| 数据测试 | string | 'checkbox' | 测试库的测试标识符 . |
| 编号 | string | —— 说 | HTML 语言 id 输入元素属性. |
| 离子标签 | string | —— 说 | 无障碍标签(如果没有) label 或者说 children (提供). |
| 样式 | CSSProperties | —— 说 | 包装的内含样式. |
| 参考 | Ref<HTMLInputElement> | —— 说 | 已转发到输入元素 . |
说明
除上述属性外,该组件还接受一个小项的所有标准道具 input 键.
堆栈
- 类型脚本 用于静态类型检查
- 反应 — JavaScript 用户界面库
- 情感 用于使用 JavaScript 写入 Css 样式
- 故事书 ——由Vite供电的UI组件环境
- 欢乐 - JavaScript 测试框架
- 反应测试库 - 以用户为中心测试用户界面组件
- ESLint 语录 代码林入
- 高级 用于代码格式
- 苏普 - 由Esbuild供电的脚本捆绑机
- 雅伦 从管理软件包
图标
yarn build- 制作软件包yarn dev- 在当地运行软件包yarn lint- 将所有文件输入此软件包yarn test运行所有单位测试yarn test:report- 打开测试覆盖报告yarn test:update:snapshot- 进行所有单元测试并更新快照
汇编
运行 yarn build 从软件包的根部 齐声 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .
这个 /dist 文件夹包含编译输出.
checkbox
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
版本
跟着 语义版本
许可证
许可证根据 MIT 许可证