Material Design 是 Google 提出的一种设计语言，为让用户获得更好的体验，前后端开发一同被包含其中。今天，我们将会学习如何实现 Material Design Switch Button 以作为一种前端用户界面组件。
什么是 Material Design Switch Button
Material Design Switch Button 是一种用户界面组件，它可以在打开和关闭的状态之间交替切换。当它被勾选的时候，会发生一种轻微的动画效果。
实现 Material Design Switch Button
在实现 Material Design Switch Button 之前，我们需要确定该组件的基本细节：它应该由三部分组成。
HTML 结构
首先，我们来看 Switch Button 的基本结构：
<label class="switch"> <input type="checkbox"> <span class="slider"></span> </label>
我们使用 label 元素作为包含器，这样可以使得用户点击输入元素时，其效果更加出色。在 label 元素中，我们包含了一个 input 元素以及一个名为 slider 的 span 元素。 input 元素的 type 属性必须为 checkbox ，而 slider 元素将是我们要设置的样式容器。
CSS 样式
接下来，我们需要给 slider 元素添加样式。
-- -------------------- ---- ------- ------- - --------- --------- -------- ------------- ------ ----- ------- ----- - ------- ----- - -------- -- ------ -- ------- -- - ------- - --------- --------- ------- -------- ---- -- ----- -- ------ -- ------- -- ----------------- ----- ------------------- ---- ----------- ---- - -------------- - --------- --------- -------- --- ------- ----- ------ ----- ----- ---- ------- ---- ----------------- ------ ------------------- ---- ----------- ---- - ------------- - ------- - ----------------- -------- - ----------- - ------- - ----------- - - --- -------- - ------------- - -------------- - ------------------ ----------------- -------------- ----------------- ---------- ----------------- -
JavaScript 特效
最后，我们需要通过 JavaScript 来添加动画效果。
我们需要使用以下代码来检测 input 元素的 checked 属性：
document.querySelector('.switch input').addEventListener('change', function() {
if (this.checked) {
// Code executed when the switch is turned on
} else {
// Code executed when the switch is turned off
}
});其中的 if 和 else 语句将判定 checked 属性是否存在，并对其进行处理。
现在，我们的示例代码已经成功地创建了一个 Material Design Switch Button。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------ ------ --------------
-------
------- -
--------- ---------
-------- -------------
------ -----
------- -----
-
------- ----- -
-------- --
------ --
------- --
-
------- -
--------- ---------
------- --------
---- --
----- --
------ --
------- --
----------------- -----
------------------- ----
----------- ----
-
-------------- -
--------- ---------
-------- ---
------- -----
------ -----
----- ----
------- ----
----------------- ------
------------------- ----
----------- ----
-
------------- - ------- -
----------------- --------
-
----------- - ------- -
----------- - - --- --------
-
------------- - -------------- -
------------------ -----------------
-------------- -----------------
---------- -----------------
-
--------
-------
------
------ ---------------
------ ----------------
----- ----------------------
--------
--------
------------------------------- ---------------------------------- ---------- -
-- -------------- -
------------------- -- ------ -----
- ---- -
------------------- -- ------ ------
-
---
---------
-------
-------总结
在本文中，我们学习了如何使用 HTML 和 CSS 实现一个 Material Design Switch Button。通过运用 JavaScript ，我们还可以添加更多的动态特性。这种教程旨在帮助读者更好地理解 Material Design 并实现 JavaScript 组件。我们希望你已经掌握了它的核心细节，能够自如地创建属于自己的 Material Design Switch Button。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c3aa8383d39b48817a026f