前言
在前端开发中，控件的选择和控制一直是重要的功能。而 @material/selection-control 包集成了 Google material design 中的选择控制相关组件，可以快速实现各种选择控制的 UI 界面。本文将详细介绍如何使用该 npm 包。
安装
使用该 npm 包，需要先安装它和其依赖。在项目根目录中，通过以下命令安装：
--- ------- ---------------------------
安装完成后，依赖会放在项目的 node_modules 文件夹中。
快速开始
在项目中引入 @material/selection-control：
--------- -----
------
------
----- ---------------- --------------------------------
-------
------
---- -- ---
---- ---------------------
------ --------------- -------------------------------------
---- ---------------------------------
---- ------------------------------- ---------- - -- ----
----- ------------------------------------ ----------- -------------- --------- -------------------
------
---- --------------------------------------
------
---- -----------------------------------
------
---- ---- ---
------- ---------------------------------------
-------
-------在上述代码中，我们使用了一个复选框控件，通过 mdc-checkbox 类来渲染控件，在 input 元素上添加 mdc-checkbox__native-control 类，来让控件知道这是一个带有原生控制元素的复选框控件。借助 @material/selection-control，我们还可以为控件添加图形化的设计元素。在后面的章节中会详细介绍其他控件。
常用样式
按钮控件（mdc-radio）
---- ------------------
------ --------------------------------- ------------ ------------ ------------------ --------
---- ------------------------------
---- --------------------------------------
---- --------------------------------------
------
---- --------------------------------
------
------ ------------------- ------ ---------在上述代码中，我们使用了一个单选按钮控件，通过 mdc-radio 类来渲染控件，在 input 元素上添加 mdc-radio__native-control 类，来让控件知道这是一个单选按钮控件。它含有一个用于选中状态的圆圈，以及在圆圈内的唯一字符，以表示选中状态。在后面的章节，我们会详细介绍其他控件的样式。
复选框控件（mdc-checkbox）
---- ---------------------
------ --------------- -------------------------------------
---- ---------------------------------
---- ------------------------------- ---------- - -- ----
----- ------------------------------------ ----------- -------------- --------- -------------------
------
---- --------------------------------------
------
---- -----------------------------------
------使用 mdc-checkbox 类来渲染复选框控件，复选框可以设置选中状态和非选中状态。
开关控件（mdc-switch）
---- -------------------
------ --------------- -----------------------------------
---- -------------------------------
---- -------------------------------
------
------使用 mdc-switch 类来渲染开关控件，开关可以设置选中状态和非选中状态。
滑块控件（mdc-slider）
---- ------------------ ------------ ------------- ----------------- ------------------- ------------------ ------------------ -------
---- ------------------------------------
---- --------------------------------
---- -------------------------------------------------
------
---- ------------------------------------
---- ------------------------
----- --------------------------------------------
------
---- ------------------------- ---------- ------------
------- --------- --------- -------------------
------
---- -------------------------------------
------
------使用 mdc-slider 类来渲染滑块控件，滑块可以设置选中的值。
总结
在本文中，我们介绍了如何使用 npm 包 @material/selection-control，以及常见的控件样式，包括按钮、复选框、开关和滑块。希望这篇文章对你有帮助！完整代码和示例可以在GitHub上找到。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedabe5b5cbfe1ea06108c3