前言
在前端开发过程中，我们常常使用checkbox来实现多选功能。然而，原始的checkbox样式并不美观，不够灵活，所以有许多开发者会选择使用第三方包去美化checkbox。本文将介绍如何使用npm包 boundless-checkbox 来美化你的checkbox。
boundless-checkbox 简介
boundless-checkbox 是一个基于react的复选框组件库，可以定制化复选框的外观和功能。其中主要提供3种样式：ClassicCheckbox、ToggleButton、SwitchToggle。
安装
首先，我们需要通过npm安装 boundless-checkbox
npm install boundless-checkbox --save
安装完成后，我们可以在项目中引入组件
import { ClassicCheckbox, ToggleButton, SwitchToggle } from 'boundless-checkbox'使用
ClassicCheckbox
以下是最基础的使用方法：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - --------------- - ---- --------------------
----- --- ------- --------- -
------------------ -
------------
---------- - -
-------- ------
-
-
-------- -
------ -
----------------
------------------------------
---------------- -- --------------- ------- ---
--
-
-
-上述代码中，我们定义了一个状态 checked 来表示是否被选中。渲染时，我们将 checked 和 onCheck 传递给 ClassicCheckbox 组件。当 ClassicCheckbox 组件被点击时，我们就可以通过 onCheck 方法来改变状态。
除此之外，ClassicCheckbox 组件还提供了其他一些参数，例如复选框的 label、disabled 等。
<ClassicCheckbox
isChecked={this.state.checked}
onCheck={checked => this.setState({ checked })}
label="My label"
disabled={false}
className="my-class"
/>ToggleButton
以下是最基础的使用方法：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------------ - ---- --------------------
----- --- ------- --------- -
------------------ -
------------
---------- - -
-------- ------
-
-
-------- -
------ -
-------------
------------------------------
---------------- -- --------------- ------- ---
--
-
-
-上述代码中，我们对 ToggleButton 的使用方法和 ClassicCheckbox 相似。
不同的是，ToggleButton 组件比 ClassicCheckbox 更加灵活。例如，我们可以通过 width、height、borderRadius 来控制组件的大小和形状。同样，我们可以通过 background、circleColor、switchColor 来控制组件的颜色和样式。
-- -------------------- ---- ------- ------------- ------------------------------ ---------------- -- --------------- ------- --- ---------- ----------- ------------------ ----------------- ------------------ ------------------ --
SwitchToggle
以下是最基础的使用方法：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------------ - ---- --------------------
----- --- ------- --------- -
------------------ -
------------
---------- - -
-------- ------
-
-
-------- -
------ -
-------------
------------------------------
---------------- -- --------------- ------- ---
--
-
-
-与 ToggleButton 相似，SwitchToggle 组件也提供了 width、height、switchColor 等属性。但是由于其样式固定，因此不能够控制具体的颜色和形状。
<SwitchToggle
isChecked={this.state.checked}
onCheck={checked => this.setState({ checked })}
width={60}
height={30}
switchColor="#37a"
/>结语
boundless-checkbox 提供了高度可定制化的复选框组件，无论是基本样式还是高级样式都能得到满足。在实际项目中使用时，需要根据实际需求来选择适合自己的样式，并通过控制属性来进行定制化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc781e8991b448dd410