起 步

目 录

包含主 css 和 JavaScript 文件

在你的项目中每个html里包含Material Lite 的css和javascript文件。 我们推荐你使用 托管在我们cdn上 的文件。.你也可以通过 定制和下载 来自己保管他们,从我们的源代码 重构 它或者在你的 npm / Bower 项目中安装它。

只需要在你的html页面中添加以下的<link><script>元素(gzip压缩后仅27kB):
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

选择配色方案

Material Design中使用的配色方案 基于你想要定制的一个主要颜色和一个点缀色。 这些颜色在css文件命中基于以下模式指定: material.{主颜色}-{点缀色}.min.css (e.g. material.indigo-pink.min.css)。我们的CND托管了大量的基于常见Material Design颜色的颜色组合。使用我们的定制和预览工具来尝试和预览可用的颜色组合。

立即下载压缩版的css和javascript(gzip压缩后仅27kB

通过添加一个 <link> 和一个 <script> 元素引入这些文件到你的HTML页面,同时添加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 。

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

在shell 中运行以下指令:
# Clone/copy Material Design lite 源代码。
git clone https://github.com/google/material-design-lite.git
# 进入包含源代码的新创建的文件夹中
cd material-design-lite
# 安装必须的依赖包
npm install && npm install -g gulp
# 构建该组件的生产版本
gulp

你可以在 dist 文件夹中找到 Material Design Lite 组件文件。复制他们到你的项目中。

通过添加一个 <link> 和一个 <script> 元素引入这些文件到你的HTML页面,同时添加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">

Note:

使用这种方法你将无法定制MDL元素的配色方案,如果你更喜欢通过CDN托管或下载组件库来定制配色方案,这种情况请使用我们的 定制和预览工具

仅需安装Material Design Lite文件到你的 Bower 可用项目中使用:

在shell中运行以下命令:
bower install material-design-lite --save

这将安装Material Design Lite 组件库文件到你项目下的 bower_components 目录中。

通过添加一个 <link> 和一个 <script> 元素引入这些文件到你的HTML页面,同时添加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">

Note:

使用这种方法你将无法定制MDL元素的配色方案,如果你更喜欢通过CDN托管或下载组件库来定制配色方案,这种情况请使用我们的 定制和预览工具

仅需安装Material Design Lite文件到你的 npm 可用项目的使用:

在shell中运行以下命令:
npm install material-design-lite --save

这将安装Material Design Lite 组件库文件到你项目下的 node_modules 目录中。

通过添加一个 <link> 和一个 <script> 元素引入这些文件到你的HTML页面,同时添加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">

Note:

使用这种方法你将无法定制MDL元素的配色方案,如果你更喜欢通过CDN托管或下载组件库来定制配色方案,这种情况请使用我们的 定制和预览工具

就这样,现在可以在您的网站中添加MDL组件了。

使用组件

你会发现下面几个 MDL 按钮 元素的例子:带墨水扩散效果的按钮和悬浮响应(FAB)按钮。只要复制和粘贴对应的源代码到你项目中的一个HTML页面上的<body> 内,就会呈现出以下的效果:

Raised button
Colored 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>

MDL元素可以通过添加css class 来调整和配置。比如给一个MDL 按钮 添加 mdl-js-ripple-effect 可以使按钮在点击时拥有墨水扩散效果,添加 mdl-button--fab 会使按钮显示为一个悬浮响应(FAB)按钮。

有大量可用元素如 卡片容器滑块表格菜单 …有关完整的MDL元素和选项请查看 组件 页面。

我们还建议你看下我们的 模板,这些都是准备好使用MDL组件的网站模板,随意看看他们可以帮助你快速启动下一个项目

通用的规则和原则

一般情况下,请按照以下基本步骤在你的HTML页面中使用MDL组件:

  1. 开始一个标准的HTML元素,如 <button>, <div>, 或 <ul>,依据你想要使用的MDL组件。这样在页面中确定了元素并准备好它用于MDL修改。
  2. 为该元素添加一个或更多的MDL 特定的 CSS class,如 mdl-buttonmdl-tabs__panel ,这再次依赖于组件,这些class为该元素启用MDL增强效果并改变它成为一个MDL组件。

记住包含 meta viewport 标签到你的文档中以确保移动设备能够正确的渲染

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

关于HTML元素和MDL CSS classes的一点提示

Material Design Lite使用命名空间式的 BEM class——它几乎可以应用于任何html元素——来构建组件,对一些组件你可以使用几乎所有的元素。在各个组件文档中的例子使用了和该组件表现良好的元素,如果你必须时候用例子中展示的元素以外的元素,我们鼓励你为应用尝试寻找最佳的元素和MDL CSS class 组合。

在动态站点中使用MDL

Material Design Lite 会在页面加载后自动化注册并渲染所有标记了MDL class的元素。 然而在动态创建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的职责是什么?

MDL的构建是为了web站点提供一套轻量级基本集的 Material Design 组件和模板。 本项目并不打算提供创建所有可能的UX需求的架构,但提供一些低层次的MD实现使你可以继续构建。即便是MD本身,具体如卡片,它也不可能以无缝方式提供每一种组合。当你发现一些事物没有提供,如在抽屉中的下拉菜单,你就需要编写自己的组件了。

该团队坚定的为开发者提供良好体验,同时也持续保证精简。

下一步?

详细的介绍关于使用组件,引入MDL class和他们的效果,编码注意事项,以及配置选项,可以在 组件 页面找到。结合使用MDL元素的例子可以在 模板页面 找到。

授权许可

谷歌保留所有权 .2015 .基于Apache-2许可证授权。

Download Kit