Material Design 中文翻译对照表

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

阅读全文

猜你喜欢

  • 使用 Koa 和 Angular 构建 Web 应用程序

    前言 在现代 Web 应用程序开发中，前后端分离已经成为了一种趋势。前端通过 AJAX 或者 WebSocket 等方式与后端进行交互，实现数据的传输和页面的渲染。

    7 个月前
  • 小技巧：使用 ESLint 保证 React Hooks 代码风格一致

    React Hooks 是 React 16.8 新增的特性，它可以让我们在不编写 class 组件的情况下使用 state 和其他 React 特性。相比于 class 组件，Hooks 更加简洁、...

    7 个月前
  • Web Components 图表组件实现的探讨

    在现代 Web 开发中，数据可视化是非常重要的一部分。图表作为一种常见的数据可视化方式，被广泛应用于各种 Web 应用中。本文将介绍如何使用 Web Components 技术实现一个简单的图表组件，...

    7 个月前
  • RESTful API 的数据返回格式应该如何选择？

    什么是 RESTful API？ RESTful API 是一种基于 HTTP 协议设计的 API，它具有以下特点： 资源定位：每个资源都有一个 URI，通过 URI 来唯一地定位资源。

    7 个月前
  • Deno 中如何使用 Logger 记录日志

    在 Deno 中，Logger 是一个非常有用的工具，可以帮助我们记录应用程序的运行状态和错误信息，便于开发和调试。本文将介绍如何在 Deno 中使用 Logger 记录日志，并提供详细的示例代码和指...

    7 个月前
  • Server-Sent Events 必知的兼容性问题

    在前端开发中，Server-Sent Events（SSE）是一种非常有用的技术，它可以让浏览器实时地接收服务器端推送的数据。相比于传统的轮询或长轮询技术，SSE 更加高效、实时，而且对服务器端资源的...

    7 个月前
  • Webpack 打包时如何拷贝文件到输出目录

    在 Webpack 打包时，有时我们需要将一些静态资源文件（如图片、字体等）一并拷贝到输出目录中，以便后续使用。本文将介绍如何使用 Webpack 打包时拷贝文件到输出目录的方法，以及相关的配置和示例...

    7 个月前
  • 使用 Cypress 如何实现测试数据的加密与解密

    前言 前端自动化测试是现代软件开发流程中必不可少的一部分。Cypress 是一款流行的前端自动化测试框架，它提供了一套完整的测试工具链，可以帮助开发人员快速、高效地编写测试用例。

    7 个月前
  • 测试网络请求：使用 Mocha 和 Mock.js 编写测试

    在前端开发中，网络请求是非常常见的操作。我们需要保证网络请求的正确性和稳定性，以确保应用程序的正常运行。为了达到这个目的，我们需要编写测试来验证网络请求的正确性和稳定性。

    7 个月前
  • 使用 Babel 将 React 代码转换为 ES5 的模块语法

    React 是目前最流行的前端框架之一，它的组件化思想和高效的 Virtual DOM 技术让前端开发变得更加简单和高效。然而，React 是基于 ES6 的语法开发的，而在一些旧的浏览器上可能无法直...

    7 个月前
  • CSS 布局新时代 ——Flexbox

    在过去，我们使用 CSS 进行布局时，通常使用浮动、定位和表格等方式来实现。但是这些布局方式都存在一些问题，比如浮动需要处理清除浮动、定位需要计算位置等等。这些问题导致布局代码变得复杂，难以维护。

    7 个月前
  • MongoDB 的备份及恢复操作详解

    MongoDB 是一种非关系型数据库，它的备份和恢复操作是非常重要的。本文将详细介绍 MongoDB 的备份和恢复操作，并提供示例代码，帮助读者更好地理解。 备份操作 MongoDB 的备份操作可以使...

    7 个月前
  • Promise 中如何实现类似 ajax 的请求

    在前端开发中，我们经常需要通过 AJAX 请求获取数据。而在异步编程中，Promise 是一个非常重要的概念。Promise 是一种异步编程的解决方案，可以让我们更加方便地处理异步操作。

    7 个月前
  • 如何在 Express.js 中使用 Webpack 进行前端构建

    前言 在前端开发过程中，我们经常需要对代码进行打包、压缩等操作，以提高页面加载速度和用户体验。而 Webpack 是一个优秀的前端构建工具，可以对项目中的资源进行打包、压缩、优化等操作，是前端开发中必...

    7 个月前
  • 如何在 Fastify 框架中使用 Redis 实现分布式锁？

    分布式锁是一种常见的解决并发问题的方式，它可以在分布式系统中确保只有一个进程或线程可以访问共享资源。在前端领域中，分布式锁可以用于解决多个客户端同时请求同一资源的问题。

    7 个月前
  • Sequelize 框架中 Join 查询的优化方法

    在 Sequelize 框架中，我们经常需要进行关联查询，也就是 Join 查询。但是在实际开发中，Join 查询往往会带来一定的性能问题，特别是在数据量较大的情况下。

    7 个月前
  • 响应式设计在工作中常见的难点及解决方案

    前言 随着移动设备的普及，越来越多的用户使用手机、平板等移动设备访问网站，因此响应式设计成为了前端开发中的一个重要环节。然而，在实际工作中，我们常常会遇到一些响应式设计的难点，本文将会介绍这些难点以及...

    7 个月前
  • 如何在 Headless CMS 中实现权限控制系统

    在现代化的 Web 应用程序中，权限控制是一个重要的功能，它可以帮助我们管理用户的访问权限，保护数据安全。Headless CMS 是一种新兴的 CMS 架构，它将内容管理和内容展示分离，使得前端开发...

    7 个月前
  • ECMAScript 2018（ES9）中的正则表达式 Unicode 属性转义和分配 Symbol

    前言 随着前端技术的不断发展，ECMAScript 也在不断地完善和更新。ECMAScript 2018（ES9）是其中的一次更新，它为正则表达式引入了 Unicode 属性转义和分配 Symbol ...

    7 个月前
  • Node.js 中如何处理 HTTPS 安全证书？

    在现代 Web 开发中，安全性是至关重要的。为了确保用户数据的安全，许多网站都使用 HTTPS 协议来加密通信。而在 Node.js 中，我们可以使用内置的 https 模块来实现 HTTPS 服务器...

    7 个月前

相关推荐

    暂无文章