Material Design 是 Google 推出的一种设计语言，旨在提供一种简洁、直观且具有层次感的用户界面设计。Material Design 不仅仅是一种视觉风格，还提供了一系列的 UI 组件，方便开发者快速构建出符合 Material Design 风格的应用程序。
在本文中，我们将介绍 Material Design 提供的常用 UI 组件，以及如何使用它们来构建出优秀的用户界面。
按钮
按钮是应用程序中最常见的 UI 组件之一。在 Material Design 中，按钮具有以下特点：
- 按钮具有明显的阴影效果，使其看起来具有立体感。
- 按钮可以具有不同的形状，如矩形、圆形等等。
- 按钮可以具有不同的颜色，来表示不同的状态。
以下是一个简单的 Material Design 按钮示例：
<button class="mdc-button mdc-button--raised"> Click me </button>
在上面的示例中，我们使用了 MDC-Web（Material Design Components for the web）库提供的 mdc-button 类来创建一个按钮。mdc-button--raised 类表示这是一个带有阴影效果的凸起按钮。
卡片
卡片是 Material Design 中另一个常用的 UI 组件。卡片通常用于展示一些简单的信息，如文章列表、商品列表等等。在 Material Design 中，卡片具有以下特点：
- 卡片通常具有圆角和阴影效果，使其看起来具有立体感。
- 卡片可以具有不同的颜色和背景图像。
- 卡片通常包含一些简单的信息，如标题、图片等等。
以下是一个简单的 Material Design 卡片示例：
-- -------------------- ---- -------
---- -----------------
---- ---------------------------------
---- ---------------------- ---------------------- ------------------------ -------------------------------------------------------------------------------------------------------------------
---- --------------------------
--- ---------------------- ---------------------------- ----------
--- ------------------------------- -------------
------
---- --------------------------
------- ----------------- ---------------- -------------------------------- ----------
------- ----------------- ---------------- -------------------------------- ----------
------
------
------在上面的示例中，我们使用了 MDC-Web 库提供的 mdc-card 类来创建一个卡片。mdc-card__primary-action 类表示这是一个主要操作区域，包含了卡片的大部分内容。mdc-card__media 类表示卡片的媒体内容，我们使用了一个背景图像来展示一张图片。mdc-card__primary 类表示卡片的主要信息，包括标题和副标题。mdc-card__actions 类表示卡片的操作区域，我们在这里放置了两个按钮。
文本框
文本框是 Material Design 中常用的输入控件之一。在 Material Design 中，文本框具有以下特点：
- 文本框具有明显的阴影效果，使其看起来具有立体感。
- 文本框可以具有不同的形状，如矩形、圆形等等。
- 文本框可以具有不同的状态，如聚焦、非聚焦等等。
以下是一个简单的 Material Design 文本框示例：
-- -------------------- ---- -------
---- --------------------- --------------------------
------ ----------- ----------------------------- -------------------
------ -------------------------- ---------------------------------
---- ----------------------------
-----
----- -----------------------------------
------
------
------在上面的示例中，我们使用了 MDC-Web 库提供的 mdc-text-field 类来创建一个文本框。mdc-text-field--outlined 类表示这是一个带有轮廓的文本框。我们使用了 mdc-floating-label 类来创建一个浮动标签，用于描述文本框的用途。mdc-notched-outline 类表示轮廓的形状，我们使用了 SVG 图像来绘制轮廓。
抽屉
抽屉是 Material Design 中常用的导航控件之一。在 Material Design 中，抽屉具有以下特点：
- 抽屉通常位于应用程序的侧边栏，可以通过滑动手势或点击按钮来打开或关闭。
- 抽屉可以包含一些链接或按钮，用于导航到其他页面或执行其他操作。
以下是一个简单的 Material Design 抽屉示例：
-- -------------------- ---- -------
------ ----------------- -------------------------
---- ---------------------------
--- -------------------------------- ----------
------
---- ----------------------------
---- -----------------
-- -------------------- ------------------------- ---------
----- -------------------------------------
----- -------------------------------- --------
----
-- --------------------- ---------
----- -------------------------------------
----- -------------------------------- --------
----
-- --------------------- ---------
----- -------------------------------------
----- -------------------------------- --------
----
------
------
--------在上面的示例中，我们使用了 MDC-Web 库提供的 mdc-drawer 类来创建一个抽屉。mdc-drawer--dismissible 类表示这是一个可以通过手势关闭的抽屉。我们使用了 mdc-drawer__header 类来创建一个抽屉的标题。mdc-list 类表示抽屉中的链接列表，我们在这里放置了三个链接。
结论
Material Design 提供了许多常用的 UI 组件，方便开发者快速构建出符合 Material Design 风格的应用程序。在本文中，我们介绍了 Material Design 中常用的按钮、卡片、文本框和抽屉等组件，并提供了相应的示例代码。希望这些信息对您有所帮助，让您能够更加轻松地开发出优秀的用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6764ffc476af2b9a20e6e2e1