前言
前端开发中，复用现有的组件是提高效率的一个重要手段。而现在，组件的在线库已经非常丰富，而使用 npm 安装在线组件库中的组件成为了很多前端开发者的习惯。其中，使用 Google 官方出品的 Material Design 组件库的前端开发者也越来越多。
其中，@material/switch 组件是 Material Design 组件库中的一个选择框组件，它的优美的样式和用户体验让它在很多场合中均有广泛的使用。本篇文章就是介绍如何在自己的项目中使用 @material/switch 组件。
安装
使用 npm 安装 @material/switch 组件非常简单，在你的项目工作区的控制台中输入以下命令即可完成安装：
--- ------- ----------------
安装完成后，在你的项目中通过以下方式引入 @material/switch 组件：
------ ----------- ---- ------------------- ----- -------- - -------------------------------------- ----- ------ - --- --------------------
快速使用
@material/switch 组件中提供了默认的 HTML 结构和 CSS，如果您在自己的项目中使用该组件，完全可以通过以下 HTML 代码来实现选择框的样式：
---- -------------------
---- --------------------------------
---- -----------------------------------
---- --------------------------
------ --------------- ----------------- ---------------------------------- --------------
------
------
------如果你使用该组件的默认 HTML 和 CSS 样式，那么只需在 JavaScript 中引入 MDCSwitch 类并将选择框元素传入构造函数即可：
------ ----------- ---- ------------------- ----- -------- - -------------------------------------- ----- ------ - --- --------------------
此时，你已经成功地在你的项目中使用了 @material/switch 组件。
组件定制
@material/switch 组件库提供了大量可供定制的参数，你可以通过这些参数快速达到对组件定制的需求。
改变颜色
默认的 @material/switch 组件使用 Google Material Design 风格的蓝色作为选择弹性条的颜色，但是如果你想要改变它的颜色，可以在 HTML 中修改选择弹性条的颜色：
---- ----------------- --------------------
---- --------------------------------
---- -----------------------------------
---- --------------------------
------ --------------- ----------------- ---------------------------------- --------------
------
------
------在使用了 mdc-switch--accent 样式类后，选择弹性条的颜色将会变成深橘色。你还可以使用 mdc-switch--secondary 样式类将选择弹性条的颜色变成浅灰色。
事件处理
如果你想在用户选择之后做一些操作，可以为选择框的原生元素添加事件监听器：
------ ----------- ---- ------------------- ----- -------- - -------------------------------------- ----- ------------------- - ------------------------------------------------------ ---------------------------------------------- -- -- - ------------------- ------ ------- -------- --------------------------------- ---
总结
@material/switch 组件是 Material Design 组件库中常见的选择框组件，它具有良好的用户体验和可定制性。在你的项目中使用该组件只需要引入 MDCSwitch 类和参考官方文档即可。在项目中应用 Material Design 的其他组件同理，这将极大地提高你项目的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/87010