前言
在开发前端项目时，经常需要使用到多个按钮的组合，比如单选按钮组、多选按钮组等。针对这种情况，我们可以使用 npm 包 @barebone/component-button-group 来帮助我们快速创建相应的按钮组。
安装
使用 npm 安装 @barebone/component-button-group：
$ npm install @barebone/component-button-group --save
使用
基本使用
在项目中引入 @barebone/component-button-group：
import ButtonGroup from '@barebone/component-button-group';
然后，创建一个按钮组单选框组：
-- -------------------- ---- ------- ----- ------------ - - - ------ ---------- ------ --------- -- - ------ ---------- ------ --------- -- - ------ ---------- ------ --------- -- -- ------------------ ---------------------- ------------------------------------ ----------------- -- ------------------- --展开代码
这里我们创建了一个单选框按钮组，并且设置了三个选项，分别是 Option1，Option2 和 Option3。默认选中的是第一个选项 Option1，当选项改变时，会触发 onChange 事件，并将当前选中的值输出到控制台上。
更多使用方式
多选按钮组
多选按钮组与单选按钮组的使用方式相似。只需要将代码中的 ButtonGroup.Radio 改为 ButtonGroup.Checkbox 即可。
嵌套组
可以将单选按钮组或多选按钮组嵌套到另一个按钮组内。
-- -------------------- ---- ------- ----- ------------ - - - ------ ---------- ------ --------- -- - ------ ---------- ------ --------- -- - ------ ---------- ------ --------- -- -- ----- ------------- - - - ------ ------- --------- ------ ---------------- -- - ------ ------- --------- ------ ---------------- -- - ------ ------- --------- -------- ------------ -- -- ------------------ ----------------------- ------------------------------------- ----------------- -- ------------------- --展开代码
在上面的示例代码中，我们定义了两个选项NEsted Option1 和 Nested Option2。还定义了一个选项Nested Options，这个选项是一个单选按钮组。当这个选项被选中时，会显示嵌套的单选按钮组Option1、Option2和Option3。
样式定制
使用者可以根据自己的需求，对按钮组的样式进行自定义。
-- -------------------- ---- ------- ------------------ ---------------------- ------------------------------------ ----------------- -- ------------------- ------------- ---------- ----------------- ------- ------------------ ------ ----------------- ------ ----------------- -- --展开代码
在上面的示例代码中，我们给容器、选项、标签和输入的类名都进行了指定，然后可以通过 CSS 对这些元素进行自定义样式。
总结
@barebone/component-button-group 是一个非常实用的 npm 包，可以帮助我们快速创建单选按钮组、多选按钮组等多种按钮组合，而且使用也非常简单。使用者可以根据自己的需求，对按钮组的样式进行自定义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556dd81e8991b448d3b88
