Material Design 是 Google 设计规范，它强调简单、直观的设计风格，对于移动设备的用户体验非常友好。其中，Toggles 和 Switches 是常用的表单元素，可以很好地用来表示开关状态，比如选项设置等。本文将详细介绍如何使用 Material Design Toggles 和 Switches，以及提供相应的示例代码和指导意义。
Material Design Toggles
Toggles 是用来表示两种不同状态的 UI 元素，可以通过手势或者单击来切换状态。在 Material Design 中，Toggles 很容易实现，只需要给一个 checkbox 添加 class md-toggle，就可以在 label 上显示一个 toggle 按钮了。
示例代码
下面是一个使用 Material Design Toggles 的例子：
------ ------------------ ------ ---------------- ----- ------------------------------ ------ ------ --------
这个代码使用了 Material Design Toggles，当用户点击 Toggle Switch 时，就可以轻易地切换状态。
指导意义
在实际应用中，可以使用 Toggles 来实现一些常用的开关功能，比如夜间模式、音乐开关等。在使用 Toggles 时，需要注意以下几点：
- 使用适当的颜色：Toggles 的颜色应当与页面主题相符，以保证一致性和美观性；
- 指示当前状态：在 Toggles 上应当明确地显示当前的状态，以便用户正确理解开关的含义；
- 提供可选方案：在一些情况下，Toggles 并不是最佳的方案，比如多选情况下。这时候，可以考虑使用单选框或者下拉菜单等。
Material Design Switches
Switches 可以在两个或多个状态之间切换，它们通常用于表示开关状态。在 Material Design 中，有两种 Switches：单行 Switch 和带标签 Switch。单行 Switch 就是一个 toggle，而带标签 Switch 则是在 toggle 的左侧加上一个标签。
示例代码
下面是一个使用 Material Design Switches 的例子：
------ ------------------ ------ ---------------- ----- ------------------------------------- ----- ------------------------------- --------
这个代码使用了 Material Design Switches，当用户点击 Switch 时，就可以轻易地切换状态。
指导意义
在使用 Switches 时，需要注意以下几点：
- 使用适当的标签：在带标签 Switch 中，标签应当与开关含义相符，以便用户理解；
- 明确当前状态：与 Toggles 类似，在 Switches 上需要明确地显示当前状态；
- 提供清晰的反馈：在用户点击 Switches 时，需要提供清晰的反馈，以便用户知道他们所做的操作是否成功。
结论
Material Design Toggles 和 Switches 是非常实用的表单元素，可以用于展示一些常用的开关状态。在使用这些元素时，需要注意颜色、当前状态和反馈等方面，以提高用户体验和交互性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670200bbf59b73a932a4beda