简介
buckets-toggle 是一款优秀的前端开发工具。它提供了一个简单的 API 和一个可扩展的工具包来实现切换开关功能。使用 buckets-toggle 可以轻松地创建开关控件，从而满足各种应用的需求。
安装
在使用 buckets-toggle 之前，你需要先安装它。可以使用 npm 命令来安装它：
npm install buckets-toggle
快速开始
使用 buckets-toggle 很简单，只需要以下几个步骤即可：
导入库
import Toggle from 'buckets-toggle';
创建开关实例
const toggle = new Toggle();
将实例加入 DOM
const container = document.getElementById('container'); container.appendChild(toggle.getToggleElement());设置开关状态
toggle.setStatus(true);
完成以上步骤后，你已经成功地创建了一个开关控件并设置了它的状态，它应该已经出现在 DOM 中了。
API
buckets-toggle 提供了一系列的 API 来方便你创建、配置和修改开关控件。
Toggle()
创建一个 Toggle 实例。可以通过传入一个配置对象来配置开关控件的一些属性。
const toggle = new Toggle({ name: 'toggle-1', onText: 'ON', offText: 'OFF' });Toggle.setStatus(status: boolean)
设置开关的状态，status 参数为 true 表示开启，false 表示关闭。
toggle.setStatus(true);
Toggle.getStatus(): boolean
获取开关的当前状态，返回值为 true 表示开启，false 表示关闭。
console.log(toggle.getStatus()); // true
Toggle.getName(): string
获取开关的名称。
console.log(toggle.getName()); // 'toggle-1'
Toggle.getToggleElement(): HTMLDivElement
获取开关的 DOM 元素。可以将开关加入到你的页面中。
const container = document.getElementById('container');
container.appendChild(toggle.getToggleElement());示例代码
以下是一个完整的示例代码，实现了一个带有两个开关的简单应用。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------
------
---- ---------------------
------- --------------
------ ------ ---- -----------------
----- ------- - --- -------- ----- ---------- ------- ---- -------- --- ---
----- ------- - --- -------- ----- ---------- ------- ----- -------- ----- ---
------------------------
-------------------------
----- --------- - -------------------------------------
--------------------------------------------------
--------------------------------------------------
---------
-------
-------当你打开这个页面时，应该可以看到两个开关控件，一个是开启状态，另一个是关闭状态。你可以尝试点击它们来改变它们的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcbb5b5cbfe1ea061266b