本文介绍如何使用 npm 包 @material-git/button-toggle 来创建漂亮而功能强大的按钮切换元素。
预备知识
在使用 @material-git/button-toggle 之前，你需要了解 HTML，CSS 和基本的 JavaScript 和 npm 知识。
安装
使用 npm 包管理器来安装 @material-git/button-toggle：
npm install @material-git/button-toggle
可以通过包管理器安装，也可以通过 git 下载源代码。源代码可以通过以下命令来克隆：
https://github.com/material-git/button-toggle.git
使用 @material-git/button-toggle
引入样式和脚本：
<link rel="stylesheet" href="node_modules/@material-git/button-toggle/dist/button-toggle.css" /> <script src="node_modules/@material-git/button-toggle/dist/button-toggle.js"></script>
使用以下代码来创建一个简单的按钮切换元素：
<div class="mdgt-button-toggle" data-mdgt-button-toggle> <button class="mdgt-button-toggle__button" data-mdgt-button-toggle-target>Option 1</button> <button class="mdgt-button-toggle__button" data-mdgt-button-toggle-target>Option 2</button> <button class="mdgt-button-toggle__button" data-mdgt-button-toggle-target>Option 3</button> <div class="mdgt-button-toggle__indicator"></div> </div>
这个代码块中，mdgt-button-toggle 类控制按钮切换，button-toggle__button 类定义每个选项按钮，button-toggle-target 属性定义与每个按钮关联的内容，indicator 类定义了按钮选择器（也称为滑块）。
你还需要调用以下 JavaScript 代码来初始化按钮切换：
mdgtButtonToggle.init();
配置选项
@material-git/button-toggle 可以使用以下选项进行自定义配置：
autoInit：设置为 false 以禁用自动初始化。autoResize：设置为 true，按钮切换可以自动调整宽度以适应选项文字的长度。multiSelectable：如果为 true，用户可以同时选择多个选项。selectionClasses：指定选定和未选定选项使用的类。
你可以在 JavaScript 中配置这些选项：
-- -------------------- ---- -------
-----------------------
--------- -----
----------- -----
---------------- -----
----------------- -
--------- ---------------------------------------
----------- ----------------------------------------
-
---总结
@material-git/button-toggle 是一个易于使用并具备许多自定义选项的 npm 包，可以用于创建漂亮而功能强大的按钮切换元素。在你开始使用它之前，请确保你具备必要的技术知识，以便更好地了解如何使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446b1