React Desktop macOS 复选框组件

React Desktop macOS 复选框组件是一个基于 React 框架开发的可定制化的 macOS 风格的复选框组件。它提供了丰富的 API 和多种默认的主题配色方案，可以轻松地进行个性化定制。需要注意的是，该组件仅适用于 macOS 操作系统。

安装

你可以使用 npm 包管理器进行安装，命令如下：

npm install react-desktop-macos-checkbox

使用

首先，导入 Checkbox 组件：

import Checkbox from 'react-desktop-macos-checkbox';

然后，你可以在 JSX 中使用 Checkbox：

<Checkbox />

具体使用方法详见 API 说明。

API

以下是 Checkbox 组件的所有可用属性及其默认值：

| 属性 | 类型 | 默认值 | 说明 | | ------------ | -------------- | ---------- | ------------------------------------------ | | checked | boolean | false | 是否被选中 | | disabled | boolean | false | 是否禁用 | | label | string / node | 'Checkbox' | 复选框的标签 | | labelPosition| 'left' / 'right' | 'right' | 标签位置，可选值为 'left' 和 'right' | | onChange | function | | 当选中状态更改时调用的回调函数 | | theme | string | 'default' | 使用的主题配色方案，可选值请见下方的主题表 |

主题

Checkbox 组件支持多种不同的主题配色方案。你可以在 theme 属性中传入对应的值来使用不同的主题。以下是所有可用的主题，及其对应的值：

| 主题 | 值 | | ----------- | ------------- | | 默认主题 | 'default' | | 紫色主题 | 'purple' | | 蓝绿色主题 | 'teal' | | 粉色主题 | 'pink' | | 灰色主题 | 'gray' |

示例

以下是一个简单的示例，展示了如何使用 Checkbox 组件：

import React from 'react';
import Checkbox from 'react-desktop-macos-checkbox';

function App() {
  const [checked, setChecked] = React.useState(false);

  function handleCheck() {
    setChecked(!checked);
  }

  return (
    <div>
      <Checkbox
        checked={checked}
        label="I agree to the terms and conditions"
        onChange={handleCheck}
      />
    </div>
  );
}

export default App;

在此示例中，我们创建了一个 App 组件，内部包含一个 Checkbox 组件。当 Checkbox 被选中时，会触发 handleCheck 函数，将 checked 状态反转。同时，Checkbox 组件的标签为 "I agree to the terms and conditions"。