Material Design Lite 中文

入门指南

内容

引入主 CSS & JavaScript 文件

在项目中的每个 HTML 页面中包含 Material Lite CSS 和 JavaScript 文件。我们建议您使用**我们 CDN 上托管的文件**。您也可以**自定义和下载**它们以自行托管，从我们的源代码**构建**它们或将它们安装到您的**npm** / **Bower** 项目中。

托管下载构建 Bower npm

只需将以下<link>和<script>元素添加到您的 HTML 页面中（27kB 压缩）

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

选择配色方案

Material Design 中使用的配色方案基于主色调和强调色，您可以根据需要进行个性化设置。这些颜色在 CSS 文件名中通过遵循以下模式来指定：material.{primary}-{accent}.min.css（例如material.indigo-pink.min.css）。我们的 CDN 托管了许多基于常用 Material Design 颜色的颜色组合。要发现和预览可用的颜色组合，请使用我们的自定义和预览工具。

立即下载压缩的 CSS 和 Javascript 文件（27kB 压缩）

通过在 HTML 页面中添加<link>和<script>元素来引用这些文件，并包含 Material Icon 字体

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

选择配色方案

Material Design 中使用的配色方案基于主色调和强调色，您可以根据需要进行个性化设置。使用自定义和预览工具为您的网站选择和预览主色调和强调色的组合。然后使用按钮下载您自定义的 Material Design Lite CSS，只需将`material.min.css`替换为自定义的 CSS 即可。

我们的源代码托管在GitHub上。您需要下载代码并构建它。

在 shell 中运行以下命令

# Clone/copy the Material Design lite source code.
git clone https://github.com/google/material-design-lite.git
# Go into the newly created folder containing the source code.
cd material-design-lite
# Install necessary dependencies.
npm install && npm install -g gulp
# Build a production version of the components.
gulp

您将在dist文件夹中找到 Material Design Lite 库的文件。将它们复制到您的项目中。

通过在 HTML 页面中添加<link>和<script>元素来引用这些文件，并包含 Material Icon 字体

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意

使用此方法，您将无法自定义 MDL 元素的配色方案。如果您想自定义配色方案，请首选 CDN 托管或可下载的库。在这种情况下，请使用我们的自定义和预览工具。

只需在您启用了Bower的项目中使用以下命令安装 Material Design Lite 文件

在 shell 中运行以下命令

bower install material-design-lite --save

这将在您的项目的bower_components文件夹中安装 Material Design Lite 库文件。

通过在 HTML 页面中添加<link>和<script>元素来引用这些文件，并包含 Material Icon 字体

<link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
<script src="/bower_components/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意

只需在您启用了npm的项目中使用以下命令安装 Material Design Lite 文件

在 shell 中运行以下命令

npm install material-design-lite --save

这将在您的项目的node_modules文件夹中安装 Material Design Lite 库文件。

通过在 HTML 页面中添加<link>和<script>元素来引用这些文件，并包含 Material Icon 字体

<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意

就是这样！您现在可以开始在您的网站上添加 MDL 组件了。

使用组件

您将在下面找到几个 MDL 按钮元素的示例：带有波纹效果的按钮和 FAB 按钮。只需将相应的源代码复制并粘贴到项目 HTML 页面的<body>中，这些元素就会按如下所示呈现。

凸起按钮

彩色 FAB

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button>
<style></style>
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>
<style></style>
<style>
body {
  padding: 20px;
  background: #fafafa;
  position: relative;
}
</style>

可以通过添加 CSS 类来调整和配置 MDL 元素。例如，向 MDL 按钮添加mdl-js-ripple-effect类将在单击按钮时添加波纹效果，添加mdl-button--fab类将把按钮的样式更改为 FAB 按钮。

还有许多其他可用的元素，例如卡片容器、滑块、表格、菜单等。有关 MDL 元素和选项的完整集合，请查看组件页面。

我们还建议您查看我们的模板。这些是使用 MDL 组件的即用型网站模板。请随时查看它们，以便在您的下一个项目中快速入门。

通用规则和原则

一般来说，请遵循以下基本步骤在 HTML 页面中使用 MDL 组件

以标准 HTML 元素开头，例如<button>、<div>或<ul>，具体取决于您要使用的 MDL 组件。这将在页面中建立元素，并为 MDL 修改做好准备。
向元素添加一个或多个 MDL 特定的 CSS 类，例如mdl-button或mdl-tabs__panel，具体取决于组件。这些类将 MDL 增强功能应用于元素，并将其转换为 MDL 组件。

请记住在您的文档中包含meta viewport标签，以便移动设备能够正确呈现。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

关于 HTML 元素和 MDL CSS 类的说明

Material Design Lite 使用命名空间BEM类（几乎可以应用于任何 HTML 元素）来构建组件。对于某些组件，您可以使用几乎任何元素。每个组件文档中的示例都使用作为该组件表现良好的元素。如果您必须使用除示例中显示的元素以外的其他元素，我们建议您进行实验以找到适合您的应用程序的 HTML 元素和 MDL CSS 类的最佳组合。

在动态网站上使用 MDL

Material Design Lite 会在页面加载时自动注册和渲染所有标记有 MDL 类的元素。但是，如果您正在动态创建 DOM 元素，则需要使用upgradeElement函数注册新元素。以下是如何动态创建上面部分中显示的相同凸起按钮和波纹效果的示例

<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button);
  document.getElementById('container').appendChild(button);
</script>

MDL 的职责是什么？

Material Design Lite 旨在为网站提供轻量级且基本的 Material Design 组件和模板集。该项目不打算提供结构来创建所有可能的 UX 需求，而是提供一个低摩擦的 Material Design 实现，您可以在此基础上构建。即使在 Material Design 本身中，尤其是卡片方面，也无法以无缝的方式提供每种组合。当您发现未提供的功能时，例如抽屉中的下拉菜单，您可能需要自己编写组件。

团队致力于为开发人员提供良好的体验，同时忠于精简版的承诺。

下一步是什么？

有关使用组件的详细说明，包括 MDL 类及其效果、编码注意事项和配置选项，请参阅组件页面。有关使用 MDL 元素的网站示例，请参阅模板页面。

许可证

下载套件