Material-UI入门文档

文档官网：http://www.material-ui.com/

实在没找到中文的，只好看英文的了。poor......现在的状态是未完待续...

入门：

1.前期准备

学Material UI之前先了解React，Material UI是React的一个组件，所以需要了解如何在网页中使用React的组件。

如果已经熟悉了单页面网站和Node，可以跳过这一步直接去看2.安装。

不然则介绍下单页面网站(SPA)和Node，这些对于菜鸟前端和只做过简单的html+js+css的人来说，还是很有用的。

单页面网站（single page applications）

很长(口胡？)一段时间以来，网站一直是用html构建静态页面，css写样式，js增添一些动画效果或用于支持用户交互。大多数客户端（client）的交互，特别是数据上的交互，需要走过一条完整的流程：数据从客户端发送到处理它的服务器，然后处理结果再发送到客户端。而且大多数这样的交互一般都会堵住（blocking）。这给客户端带来了巨大的压力，忙于处理这些交互的客户端根本不能与用户交互，用户只能等着这些数据都搞定了才能操作，这不友好！

异步服务器调用的出现（ajax）使得客户端可以边做别的事边和服务器数据交互。但是说到底还是需要让数据走这个流程，而且网页也并不如安装的应用来得流畅。为了解决这一困境，SPAs就被折腾出来了。

SPA就是单页面的网站，用户交互也只是动态更新该页面内容。整个网站在一开始就加载所有的html，css，js。大部分的处理交互的逻辑都写在js上。这一切构成了一个流畅、灵敏、迅速的网站。这个技术在过去十年中发展较好，许多流行的js框架都对它比较友好（This web programming architecture has gained tremendous traction in the last decade, with many popular JavaScript presentation frameworks geared towards SPAs）。如：

Angular

Ember

Backbone

React.

有些工具能帮我们将单页面内的东西分成几个模块，这样写和引用都会很方便，比如node。

Node

node的核心是一个c语言写的程序，能让js在你的shell上运行（是的，你的terminal，而非浏览器）。为了做到这一点，它用的是chrome v8的js引擎。因此，node基本上是一个运行环境。

node刚刚被创建的时候，主要是针对在js中开发web server，然而js的使用历来被限制在客户端中。但是随着时间的推移，网页的开发者们意识到了使用Node管理依赖的好处，然后造出了：

Grunt

Glup

Browserify

Webpack

随着Node的流行，独立开发者和组织们几乎用script（用node跑的）写任何与web相关的东西。当时的“custom node script”这个Node库给大家带来了各种便利，它开放给了开发者，大家都能上传自己的node Script，也能下载使用它。

node package manager（npm）做的就是这个事儿，它是一个命令行工具，可以用来管理依赖的包。比如咱们的Material-UI就可以作为一个package被npm管理。这就是说，可以在文件目录下使用npm install material-ui导入material-ui的包，然后就可以使用啦~

如果需要了解更多node，可以看这个博客和这个视频。

2.安装

material-ui可以通过npm package的方式安装。

react-tap-event-plugin

现暂时使用react-tap-event-plugin 监听touch/tap/clickevents这些事件，如果React官方出了解决方案，这个就会被移除。但是还没出的时候只能先用这个，要在程序开始前确认注入了这个插件。

<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="font-size:14px;">import injectTapEventPlugin from 'react-tap-event-plugin';// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();</span></span>

react-tap-event-plugin提供onTouchTap()给所有React组件。这在material-ui中是onclick()的替代，对于button特别有效，对移动端也友好。

Roboto字体

material-ui默认roboto字体，所以要保证这个被包含在项目里，这么做到。

ES编译

这篇文档的栗子们用的是es规范的stage-1 feature，如果要在自己的环境下跑这些栗子，要保证插件。怎么安装babel插件。

3.用法

从v0.15.0开始，material-ui的组件需要一个主题（theme），最快捷的方式是用MuiThemeProvider将主题注入程序，然后就可以用文档内的任何组件啦~

一个栗子：

./App.js

<span style="font-family:Microsoft YaHei;font-size:14px;">import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';const App = () => (<MuiThemeProvider><MyAwesomeReactComponent /></MuiThemeProvider>
);ReactDOM.render(<App />,document.getElementById('app')
);</span>

./MyAwesomeReactComponent.js

<span style="font-family:Microsoft YaHei;font-size:14px;">import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';const MyAwesomeReactComponent = () => (<RaisedButton label="Default" />
);export default MyAwesomeReactComponent;</span>

请参阅每个组件的文档，看看如何导入它们。

注意，在上面的栗子中，使用

import RaisedButton from 'material-ui/RaisedButton';

代替

import {RaisedButton} from 'material-ui';

这样能构建更快，构建输出的信息更精简，对于Material-ui的impotr具体映射，详见material-ui的npm package根目录下的/index.js。

定制

Material-ui有默认的主题，想改变组件的造型也很简单，有两种方式：

自定义主题

使用内嵌样式，重写样式

4.服务器渲染

如果使用Material-ui在在服务器端渲染，那客户端和服务器的环境必须一样。

Autoprefixer(自动前缀)

（它解析css文件并添加浏览器前缀到css规则。）

首先，material-ui需要使用相同的自动前缀补足的浏览器前缀（user agents）。在客户端里默认是navigator.userAgent，但是服务器端，navigator是undefined，所以需要自己提供。userAgent可以是如下值：

一个很普通的浏览器前缀（user agent），比如：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.82 Safari/537.36

'all'，所有前缀都添加

false，禁用prefixer

我们依靠muiTheme context 将浏览器前缀添加到所有组件，栗子：

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {green100, green500, green700} from 'material-ui/styles/colors';const muiTheme = getMuiTheme({palette: {primary1Color: green500,primary2Color: green700,primary3Color: green100,},
}, {avatar: {borderColor: null,},userAgent: req.headers['user-agent'],
});class Main extends React.Component {render() {return (<MuiThemeProvider muiTheme={muiTheme}><div>Hello world</div></MuiThemeProvider>);}
}export default Main;

process.evn.NODE_ENV

process.evn.NODE_ENV也需要服务器端和客户端一致，不然校验和会不匹配。为了保证我们的style只转换一次，我们给每个style都增加了一个属性：process.env.NODE_ENV !== 'production'

5.栗子

这里有两个demo，他们可以在example folder中找到，这两个栗子是比较基础的，示例了怎么把material-ui的组件用到自己的项目里。

第一个项目使用browserify构建模块，使用gulp将js任务自动化。

第二个项目用webpack构建模块与项目搭建。

这整个文档的栗子也在库里，不过是一个略复杂的项目，也是用webpack，还包含了每个material-ui的组件的实例。

查看文档文件夹可以看到构建说明。

----------------------------------------------------------------------------------------------------------------------------------------------------

到这里“入门”就结束了，之后的部分有定制（主题，内联样式，颜色）和组件。这些在官网直接能看到组件效果，所以这个译文肯定没有官网好。非常推荐直接去官网看。

官网地址：http://www.material-ui.com/

如果说真的看那些英文很头疼，可以用翻译器把整个网页翻译后再看，因为描述简短，页面的翻译效果还是可以的，推荐google翻译。

Material-UI入门文档相关推荐

Android入门文档
该文章为网络材料整理,部分内容经过重新编写. 一. 名词介绍 JDK:Java Development Kit Java 语言的软件开发工具包 JRE:Java Runtime Environment ...
UniRx官方入门文档
UniRx 官方文档翻译 UniRx官方入门文档 UniRx入门系列一 UniRx入门系列二 UniRx入门系列三 UniRx入门系列四 UniRx入门系列五 UniRx 基于Unity的响应式编程框 ...
一份其实很短的 LaTeX 入门文档
一份其实很短的 LaTeX 入门文档优雅的 LaTeX 有很多 Geeks 或者 LaTeX's Fanatical Fans 过分地强调了 LaTeX 的一些并非重点的特性,以至于很多初学者会觉得 ...
Entity Framework Core 中文入门文档
点击链接查看文档: Entity Framework Core 中文入门文档转载于:https://www.cnblogs.com/ideck/p/efcore.html
CAN总线入门、LIN总线入门文档-蓝凑云下载。 LDFEditor下载 ISO-14229、15765、11898下载与阅读
这两个入门文档: 中文版.讲解得全面又详细,初学者值得一看. 一.CAN总线入门-瑞萨版 1)https://wwe.lanzoui.com/igt4hit08je2)链接:https://pan.b ...
CloudEvents 入门文档
CloudEvents 入门文档 - 1.0.3 版本文档来自:GitHub CloudEvents 摘要这份非技术规范文档用来为你提供关于 CloudEvents 规范的总体概览.它补充了 Cl ...
matlab入门文档
博主太赞了,把文档搬运好了:https://blog.csdn.net/in_nocence/article/details/78358614 matlab自带的入门文档,我看了半天的英文,脑阔疼但 ...
iOS端的UI设计文档
iOS端的UI设计文档 APP和网站,风格色调始终注意保持一致(平台一致性) 在App不断更新的过程中定义设计准则.风格.规范设计规范: 1.分类合理(为了能让用户快速查找,合理的分类必不可少) 2 ...
AGM AG32VF407VGT6（248M主频MCU + 内置2KLE CPLD）开发入门文档
AGM AG32VF407VGT6(248M主频MCU + 内置2KLE CPLD)开发入门文档第一章:器件特性概述产品概述: AGM32系列32位微控制器旨在为MCU用户提供新的自由度和丰富的兼 ...
Pushy入门文档中文翻译
本文为博主原创,允许转载,但请声明原文地址:http://www.coselding.cn/article/2016/12/01/Pushy入门文档中文翻译/ pushy 这是我自己的翻译版本,原文地 ...

Material-UI入门文档

Material-UI入门文档相关推荐

最新文章

热门文章