复选框组件
简单的复选框组件 .
安装
npm install @bolttech/frontend-foundations @bolttech/atoms-checkbox
或者说
yarn add @bolttech/frontend-foundations @bolttech/atoms-checkbox
道具
这个 Checkbox 组件接受以下属性:
| Prop | 类型 | 说明 |
|---|---|---|
| 编号 | string | 复选框元素的ID属性 . |
| 标签 | string | 复选框的标签文本 . |
| 已禁用 | boolean | 设定为时禁用复选框 true。 。 。 . |
| 错误 | string | 要显示的可选错误消息 . |
| 参考 | object | 复选框元素的参考对象. |
| 检查 | boolean | 确定复选框是否被选中. |
| 变化 | function | 调用函数处理复选框更改事件 . |
| 布莱尔 | function | 回调函数处理复选框模糊事件. |
| 焦点 | function | 回调函数处理复选框焦点事件. |
使用量
import React, {useState} from 'react';
import {Checkbox} from '@bolttech/atoms-checkbox';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";
const ExampleComponent = () => {
const [isChecked, setIsChecked] = useState(false);
const handleCheckboxChange = (event) => {
setIsChecked(event.target.checked);
};
return (
<BolttechThemeProvider theme={bolttechTheme}>
<Checkbox
id="custom-checkbox"
label="Check me"
disabled={false}
errorMessage="This field is required"
checked={isChecked}
onChange={handleCheckboxChange}
/>
</BolttechThemeProvider>
);
};
export default ExampleComponent;
捐款
欢迎捐款! 对于任何错误修正、改进或新特性,请打开一个 问题 或者提交拉动请求.
请在提交前遵循代码标准并测试您的更改 .