Material Design 是 Google 推出的一种设计语言，旨在为移动和 Web 应用程序提供一致的外观和感觉。在前端开发中，常常需要使用 Material Design 相关的组件和样式，因此熟悉 Material Design 中文翻译对照表对于前端工程师来说非常重要。
基本概念
在了解 Material Design 中文翻译对照表之前，我们先来了解一些基本概念。
Material
Material 是 Material Design 的核心概念之一，指的是“材料”。在 Material Design 中，所有的组件都是基于材料的概念设计的。材料可以是实物，也可以是虚拟的。在 Material Design 中，材料有以下特性：
- 物理性：材料具有厚度、质地、阴影和反光等物理属性。
- 移动性：材料可以在 x、y、z 三个维度上移动和变形。
- 可触控性：材料可以被触摸和操作。
Elevation
Elevation 是 Material Design 中用于表示材料高度的概念。在 Material Design 中，所有的组件都有一个 Elevation 值，用于表示其高度。Elevation 值越大，组件越高。
Color
Color 是 Material Design 中非常重要的概念，指的是“颜色”。在 Material Design 中，颜色有以下特性：
- Primary Color：主色调，用于表示品牌色或应用程序的主色调。
- Secondary Color：次要色调，用于表示应用程序的次要颜色。
- Accent Color：强调色，用于突出重要内容。
- Background Color：背景色，用于表示组件的背景色。
- Text Color：文本颜色，用于表示文本的颜色。
中文翻译对照表
下面是 Material Design 中常用的一些组件和样式的中文翻译对照表。
Typography
| 英文 | 中文 |
|---|---|
| Headline | 标题 |
| Subheading | 副标题 |
| Body1 | 正文1 |
| Body2 | 正文2 |
| Caption | 标注 |
| Button | 按钮 |
| Input | 输入框 |
Buttons
| 英文 | 中文 |
|---|---|
| Raised Button | 凸起按钮 |
| Flat Button | 扁平按钮 |
| Floating Action Button | 浮动操作按钮 |
Card
| 英文 | 中文 |
|---|---|
| Card | 卡片 |
| Card Header | 卡片头部 |
| Card Title | 卡片标题 |
| Card Subtitle | 卡片副标题 |
| Card Content | 卡片内容 |
| Card Actions | 卡片操作 |
Dialog
| 英文 | 中文 |
|---|---|
| Dialog | 对话框 |
| Dialog Title | 对话框标题 |
| Dialog Content | 对话框内容 |
| Dialog Actions | 对话框操作 |
Input
| 英文 | 中文 |
|---|---|
| Text Field | 文本框 |
| Filled Text Field | 填充文本框 |
| Outlined Text Field | 带边框的文本框 |
| Text Area | 文本域 |
Navigation
| 英文 | 中文 |
|---|---|
| Navigation Drawer | 导航抽屉 |
| Bottom Navigation | 底部导航 |
| Tab Bar | 标签栏 |
示例代码
下面是一个使用 Material Design 组件的示例代码：
--------- -----
------
------
----- ----------------
--------------- ------ ------------
----- -------------------------------------------------------------- -----------------
----- ---------------- ----------------------------------------------------------------------------------------
----- --------------- ---------------------------- --------------------
-------
------
-----
---- --------------------
-- -------- ---------------------------
-- -------- ------------------------- -------------------------- -----------------------------------
--- ------------ ----------------------
------ ----------------------
------ ----------------------------
------ ----------------------------
-----
------
------
--- --------------- -----------------
------ ----------------------
------ ----------------------------
------ ----------------------------
-----
---- ------------
---- ---------- --- ----
---- -------------
---- ---------------------
----- ----------------------- ------------
---- -- - ---- ------ ----- - -- ---- -- ---------- ----- ---- -- ----------------
------
---- --------------------
-- ------------- -- - --------
-- ------------- -- ------- --------
------
------
------
------
---- ------------
----- ---------- -----
---- ------------
---- ------------------ --- ----
------ --------------- ----------- -----------------
------ ---------------------- ------------
------
---- ------------------ --- ----
------ -------------- ----------- -----------------
------ -------------------- ------------
------
------
-------
------
---- -------------------------
-- ------------------- --------- -----
-- ------------ -----------------------------
----
----
------ ------------------- ------- ------------------------------------------------
------ ------------------- ------ ------------ ------------------------------------------------
------ ------------------- --------- -------------------------------------------
------ ------------------- -------- -----------------------------------------------
-----
------
------- ----------------------------------------------------------------------------------------------
--------
--------------------------------------------- ---------- -
--- ----- - --------------------------------------
--- --------- - ----------------------
---
---------
-------
-------这个示例代码使用了 Materialize CSS 框架，其中包含了 Material Design 的组件和样式。在这个示例代码中，我们使用了导航栏（Navigation）、卡片（Card）、文本框（Input）和浮动操作按钮（Floating Action Button）等 Material Design 组件。同时，我们也使用了 Material Design 的颜色和字体等样式。
总结
Material Design 中文翻译对照表是前端开发中非常重要的参考资料。通过掌握 Material Design 中的基本概念和常用组件及样式的中文翻译，我们可以更加方便地使用 Material Design 相关的组件和样式。同时，我们也可以通过示例代码来学习如何使用 Material Design。掌握 Material Design 对于提升前端开发的技能和水平非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66060d06d10417a2223f7a01