npm 包 @material/switch 使用教程

前言

前端开发中，复用现有的组件是提高效率的一个重要手段。而现在，组件的在线库已经非常丰富，而使用 npm 安装在线组件库中的组件成为了很多前端开发者的习惯。其中，使用 Google 官方出品的 Material Design 组件库的前端开发者也越来越多。

其中，@material/switch 组件是 Material Design 组件库中的一个选择框组件，它的优美的样式和用户体验让它在很多场合中均有广泛的使用。本篇文章就是介绍如何在自己的项目中使用 @material/switch 组件。

安装

使用 npm 安装 @material/switch 组件非常简单，在你的项目工作区的控制台中输入以下命令即可完成安装：

npm install @material/switch

安装完成后，在你的项目中通过以下方式引入 @material/switch 组件：

import {MDCSwitch} from '@material/switch';

const switchEl = document.querySelector('.mdc-switch');
const switch = new MDCSwitch(switchEl);

快速使用

@material/switch 组件中提供了默认的 HTML 结构和 CSS，如果您在自己的项目中使用该组件，完全可以通过以下 HTML 代码来实现选择框的样式：

<div class="mdc-switch">
  <div class="mdc-switch__track"></div>
  <div class="mdc-switch__thumb-underlay">
    <div class="mdc-switch__thumb">
      <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
    </div>
  </div>
</div>

如果你使用该组件的默认 HTML 和 CSS 样式，那么只需在 JavaScript 中引入 MDCSwitch 类并将选择框元素传入构造函数即可：

import {MDCSwitch} from '@material/switch';

const switchEl = document.querySelector('.mdc-switch');
const switch = new MDCSwitch(switchEl);

此时，你已经成功地在你的项目中使用了 @material/switch 组件。

组件定制

@material/switch 组件库提供了大量可供定制的参数，你可以通过这些参数快速达到对组件定制的需求。

改变颜色

默认的 @material/switch 组件使用 Google Material Design 风格的蓝色作为选择弹性条的颜色，但是如果你想要改变它的颜色，可以在 HTML 中修改选择弹性条的颜色：

<div class="mdc-switch mdc-switch--accent">
  <div class="mdc-switch__track"></div>
  <div class="mdc-switch__thumb-underlay">
    <div class="mdc-switch__thumb">
      <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
    </div>
  </div>
</div>

在使用了 mdc-switch--accent 样式类后，选择弹性条的颜色将会变成深橘色。你还可以使用 mdc-switch--secondary 样式类将选择弹性条的颜色变成浅灰色。

事件处理

如果你想在用户选择之后做一些操作，可以为选择框的原生元素添加事件监听器：

import {MDCSwitch} from '@material/switch';

const switchEl = document.querySelector('.mdc-switch');
const switchNativeControl = switchEl.querySelector('.mdc-switch__native-control');

switchNativeControl.addEventListener('change', () => {
  console.log(`switch native control checked? ${switchNativeControl.checked}`);
});

总结

@material/switch 组件是 Material Design 组件库中常见的选择框组件，它具有良好的用户体验和可定制性。在你的项目中使用该组件只需要引入 MDCSwitch 类和参考官方文档即可。在项目中应用 Material Design 的其他组件同理，这将极大地提高你项目的开发效率。

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