欢迎使用CSDN-markdown编辑器

react angular backbone ember 都是构建单页面应用的框架

material UI

是打破传统的代码转换成更小的模块,类似与面向对象封装成不同的类和接口,可以以后捆绑到一起来更好的构建页面,.这是node的有优势
-主要是c语言编写的一个程序让我们在shell环境下运行JavaScript,而不是在chrome的v8 JavaScript引擎上面,所以他基本上是一个运行是时刻的环境
更多的基于node的管理工具被创造出来 grut gulp browserify webpack 等npm 是命令的工具,用于参入外部JavaScript成为自己的项目
整体划分
- 开始介绍
material UI 是新的新的公共管理包
我们的组件使用 react-tap-event-plugin 来监听 touch/tap/clickevents这些事件,你必须要你的程序开始之前注入这个插件否则会报错,

import injectTapEventPlugin from 'react-tap-event-plugin';//引入和初始化 injectTapEventPlugin();

设计采用的是Roboto Font字体 所以它要包含到你的项目中去

用法

0.15.0开始
material需要提供一个主题,最快捷的方式就是通过MuithemeProvider注入主题到应用中来快速的启动和运行
例子

 ./App.jsimport 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'));./MyAwesomeReactComponent.jsimport React from 'react';import RaisedButton from 'material-ui/RaisedButton';const MyAwesomeReactComponent = () => (  <RaisedButton label="Default" />);export default MyAwesomeReactComponent;

用下面的来代替上面的让构建需要的材料更少,启动根据迅速,不需要将material中的ui组件全部映射到import中import RaisedButton from 'material-ui/RaisedButton';//来代替import {RaisedButton} from 'material-ui';

服务器渲染
在服务器和客户端必须使用相同的环境来运行material UI
一个普通用户代理一样 ‘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

设置:

import React from 'react';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'],});const Main = () => (  <MuiThemeProvider muiTheme={muiTheme}>    <div>Hello world</div>  </MuiThemeProvider>);export default Main;

怎么运行的

要实现定制，你可以在上面的例子中看到的水平，材质的UI是使用称为单一的JS对象muiTheme。默认情况下，该muiTheme对象是基于 lightBaseTheme。

该muiTheme对象包含以下键：

spacing：可用于改变元件的间距。
fontFamily 可用于更改默认字体系列。
palette 可以用来改变元件的颜色。
zIndex 可以用来改变各成分的电平。
isRtl 可以用来使左模式的权利。
还为每个组件，所以你可以用它来分别自定义他们的一个关键：
appBar
avatar
…
自定义主题

要自定义muiTheme您必须使用getMuiTheme()来计算一个有效的muiTheme对象，并提供包含要自定义键的对象。然后，你可以使用提供了下去树组件。

import React from 'react';import {cyan500} from 'material-ui/styles/colors';import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';import getMuiTheme from 'material-ui/styles/getMuiTheme';import AppBar from 'material-ui/AppBar';// This replaces the textColor value on the palette// and then update the keys for each component that depends on it.// More on Colors: http://www.material-ui.com/#/customization/colorsconst muiTheme = getMuiTheme({  palette: {    textColor: cyan500,  },  appBar: {    height: 50,  },});// MuiThemeProvider takes the theme as a property and passed it down the hierarchy.const Main = () => (  <MuiThemeProvider muiTheme={muiTheme}>    <AppBar title="My AppBar" />  </MuiThemeProvider>);export default Main;

使用muiTheme您的自定义组件

在某些情况下，保持接口的一致性，你要访问的muiTheme 由提供的变量MuiThemeProvider组成部分。要做到这一点，我们暴露了一个高阶组件：muiThemeable。下面是一个例子：

import React from 'react';import muiThemeable from 'material-ui/styles/muiThemeable';const DeepDownTheTree = (props) => (  <span style={{color: props.muiTheme.palette.textColor}}>    Hello World!  </span>);export default muiThemeable()(DeepDownTheTree);

未完待续