ReactJS 蓝图开关组件

ReactJS 蓝图开关组件是一个灵活且易于使用的开关组件，提供可自定义颜色和大小的选项，并且适用于任何类型的 web 应用程序。

特性

• 可自定义颜色和大小
• 响应式设计，可在各种设备上使用
• 极易使用

安装

使用 npm 安装:

npm install react-blueprint-switch

或者使用 yarn 安装:

yarn add react-blueprint-switch

使用

在你的 React 组件中引用并使用 Switch 组件：

import React, { useState } from 'react';
import Switch from 'react-blueprint-switch';

const MyComponent = () => {
  const [checked, setChecked] = useState(false);

  const handleChange = (event) => {
    setChecked(event.target.checked);
  }

  return (
    <div>
      <Switch
        checked={checked}
        onChange={handleChange}
      />
    </div>
  );
}

export default MyComponent;

API

Props

名称 | 类型 | 默认值 | 描述 -- | -- | -- | -- checked | boolean | false | 指示开关状态的布尔值 onChange | function | 无 | 当开关状态改变时调用的事件处理器函数 disabled | boolean | false | 指示组件是否禁用的布尔值 color | string | '#2196f3' | 开启状态下的颜色 offColor | string | '#cccccc' | 关闭状态下的颜色 height | number | 20 | 组件的高度（单位: 像素） width | number | 40 | 组件的宽度（单位: 像素）

方法

名称 | 描述 -- | -- focus() | 使组件获得焦点 blur() | 使组件失去焦点

示例

import React, { useState } from 'react';
import Switch from 'react-blueprint-switch';

const MyComponent = () => {
  const [checked, setChecked] = useState(false);

  const handleChange = (event) => {
    setChecked(event.target.checked);
  }

  return (
    <div>
      <Switch
        checked={checked}
        onChange={handleChange}
      />
      <Switch
        checked={checked}
        onChange={handleChange}
        color="red"
        offColor="gray"
      />
      <Switch
        checked={checked}
        onChange={handleChange}
        height={30}
        width={60}
      />
      <Switch
        checked={checked}
        onChange={handleChange}
        disabled
      />
    </div>
  );
}

export default MyComponent;

效果：

以上就是 ReactJS 蓝图开关组件的全部内容，希望对你有所帮助！