npm 包 switchery 使用教程

Switchery 是一个纯 CSS 实现的 iOS 风格开关按钮库，可以轻松地将原生 HTML 复选框转换为漂亮的开关按钮。本文将介绍如何使用 npm 包 switchery 并提供一些示例代码。

安装

你可以通过以下命令来安装 switchery：

npm install switchery --save

这将会在你的项目中安装 switchery，并将其添加到你的 package.json 文件中。

使用

要使用 switchery，你需要在 HTML 中创建一个复选框控件，然后使用 JavaScript 初始化 switchery 对象。下面是一个简单的示例：

<input type="checkbox" class="js-switch">

var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);

这个示例创建了一个带有类名 .js-switch 的 HTML 复选框，并将其传递给 switchery 构造函数进行初始化。

选项

Switchery 支持一些选项，可以用来控制其外观和行为。以下是一些常用选项：

• color: 开关按钮的颜色，默认值为 #64bd63
• secondaryColor: 按钮关闭时的背景颜色，默认值为 #dfdfdf
• jackColor: 开关按钮的中心颜色，默认值为 #fff
• jackSecondaryColor: 按钮关闭时中心的背景颜色，默认值为 null
• className: 开关按钮的 CSS 类名，默认值为 switchery

你可以通过下面的代码来配置这些选项：

var elem = document.querySelector('.js-switch');
var init = new Switchery(elem, {
  color: '#ff6600',
  jackColor: '#fff',
  className: 'custom-switch'
});

方法

Switchery 还提供了一些方法，可以用来操作开关按钮。以下是一些常用方法：

• destroy: 销毁 switchery 对象
• enable: 启用开关按钮
• disable: 禁用开关按钮
• isChecked: 判断开关按钮是否被选中
• setPosition: 设置开关按钮位置

你可以使用下面的代码来调用这些方法：

-- -------------------- ---- -------
--- ---- - -------------------------------------
--- ---- - --- ----------------

-- -- --------- --
---------------

-- ------
--------------

-- ------
---------------

-- -----------
-----------------

-- --------
-----------------------

总结

在本文中，我们介绍了如何使用 npm 包 switchery，并提供了一些示例代码。Switchery 是一个非常方便的库，可以帮助你轻松地创建漂亮的 iOS 风格开关按钮。希望这篇文章对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34354