React 桌面 Windows 复选框组件

React 桌面 Windows 复选框组件是一个用于构建 Windows 操作系统风格界面的 React 组件，它提供方便易用的复选框功能，适用于构建各种复选框类型的应用。

安装

使用 npm 安装：

npm install react-windows-checkbox --save

使用

在 React 组件中引入 react-windows-checkbox 组件，并将其渲染到页面上即可开始使用。

import React from 'react';
import Checkbox from 'react-windows-checkbox';

function App() {
  const [isChecked, setIsChecked] = React.useState(false);

  const handleCheck = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <Checkbox
      label="Windows复选框"
      checked={isChecked}
      onChange={handleCheck}
    />
  );
}

export default App;

API

props

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | label | 复选框标签 | string | '' | | checked | 是否选中 | boolean | false | | onChange | 选中状态改变时的回调函数 | func | - |

示例

基本用法

import React from 'react';
import Checkbox from 'react-windows-checkbox';

function App() {
  const [isChecked, setIsChecked] = React.useState(false);

  const handleCheck = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <Checkbox
      label="复选框"
      checked={isChecked}
      onChange={handleCheck}
    />
  );
}

export default App;

禁用状态

import React from 'react';
import Checkbox from 'react-windows-checkbox';

function App() {
  return (
    <Checkbox
      label="禁用复选框"
      checked={false}
      onChange={() => { }}
      disabled
    />
  );
}

export default App;

主题

import React from 'react';
import Checkbox from 'react-windows-checkbox';

function App() {
  return (
    <Checkbox
      label="带主题的复选框"
      theme="light"
    />
  );
}

export default App;

License

MIT © 2022 React Windows Checkbox.