介绍
Material Design 是一种由 Google 开发的现代化设计语言，用于 Android、Web 和桌面应用程序的设计。Material Design 旨在创造更具可见性、层次结构性和现代性的设计。
Checkbox 是一种常用的 HTML 元素，用于在网站或应用程序中收集或显示多个选项。Material Design 风格的 Checkbox 控件为应用程序带来了更现代、更美观的视觉效果。
本文将介绍如何使用 Material Design 风格的 Checkbox 控件，并提供详细说明和示例代码来指导您。
准备工作
在开始使用 Material Design 风格的 Checkbox 控件之前，需要确定使用的库。Google 官方提供了 Material Design 的样式和组件的实现，用户可以使用它们来为他们的 Web 应用程序添加 Material Design 风格。
本文将使用 Materialize CSS 库，这是一个基于 Material Design 开发的轻量级 CSS 框架，用户可以使用它来创建响应式、美观的网站。
您需要按照以下步骤来准备 Materialize CSS：
- 访问 Materialize CSS 官方网站 https://materializecss.com/
- 点击右上角的 “Download” 按钮
- 下载最新版本的 Materialize CSS
创建 Checkbox 控件
现在，在您的 HTML 页面中，您需要包含 Materialize CSS 的 CSS 文件和 JavaScript 文件。您可以使用以下代码来包含它们：
--------- -----
------
------
---- ------ --------------- ---
----- ---------------- -----------------------------------
---- ------ -------------- ---
------- ------------------------------------------
-------
------
---- ---- ---- ---- ---- ---- ---
-------
-------现在，您可以创建 Material Design 风格的 Checkbox 控件。以下是一个示例：
--------- -----
------
------
---- ------ --------------- ---
----- ---------------- -----------------------------------
---- ------ -------------- ---
------- ------------------------------------------
-------
------
---- ------------
---- ---------- -----
-------
------ --------------- --
---------------------
--------
------
------
-------
-------在这个示例中，我们创建了一个包含 Checkbox 的标签。我们使用了 Materialize CSS 的“行”和“列”网格系统，以使页面响应式。
请注意，我们在标签中包含了一个包装标签。这是因为 Materialize CSS 的 Checkbox 需要使用其他 HTML 元素，如span来呈现更好的样式。
对 Checkbox 应用样式
Materialize CSS 包括许多 CSS 类来帮助我们自定义控件的外观。以下是一些类的列表，您可以应用于 Checkbox 控件：
filled-in：在 Checkbox 内部填充颜色。disabled：禁用 Checkbox。indeterminate：使 Checkbox 的状态为不确定状态。primary-color：应用主要颜色，以使 Checkbox 使用主要颜色进行填充。secondary-color：应用次要颜色，使 Checkbox 使用次要颜色进行填充。
以下是一个示例，演示如何应用这些类：
--------- -----
------
------
---- ------ --------------- ---
----- ---------------- -----------------------------------
---- ------ -------------- ---
------- ------------------------------------------
-------
------
---- ------------
---- ---------- -----
-------
------ --------------- ---------------- -------------- --
------------- ---------------
--------
------
---- ---------- -----
-------
------ --------------- ---------------- ---------------- --
--------------- ---------------
--------
------
---- ---------- -----
-------
------ --------------- ---------------- --------- -------- --
-------------- ---------------
--------
------
---- ---------- -----
-------
------ --------------- ---------------- -------------- --
------------------- ---------------
--------
------
------
-------
-------在这个示例中，我们创建了四个 Checkbox 控件。我们为每个控件应用了不同的 CSS 类，以自定义其外观。注意我们在包装标签内部的使用方法。
结论
在这篇文章中，我们学习了如何使用 Materialize CSS 库创建 Material Design 风格的 Checkbox 控件。我们学习了如何应用不同的 CSS 类来自定义控件的样式。
Material Design 风格的 Checkbox 控件是一个现代、美观的解决方案，可以被广泛应用于网站和应用程序中。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67026df7d91dce0dc8476310