簡介
Material-UI是一組實(shí)現(xiàn)了谷歌Material Design設(shè)計(jì)原則的React組件集合，江湖傳言使用Material-UI可以使我們的頁面顏色更鮮艷，動畫效果更突出（符合Material Design的設(shè)計(jì)風(fēng)格），那么接下來就由我來帶大家圍觀下吧~
What is Material Design
究竟什么是Material Design呢？
“設(shè)計(jì)是創(chuàng)造的藝術(shù)，我們的目標(biāo)就是要滿足不同的人類需要。人們的需要會隨著時(shí)間發(fā)展，我們的設(shè)計(jì)，實(shí)踐，以及理念也要隨之提升。我們在自我挑戰(zhàn)，為用戶創(chuàng)造了一個(gè)可視化語言，它整合了優(yōu)秀設(shè)計(jì)的經(jīng)典原則和科學(xué)與技術(shù)的創(chuàng)新。這就是Material Design?！?—— 關(guān)于Material Design，其親爹谷歌是這么介紹的。
Material Design的設(shè)計(jì)風(fēng)格如下圖，其核心思想就是把物理世界的體驗(yàn)帶進(jìn)屏幕。去掉現(xiàn)實(shí)中的雜質(zhì)和隨機(jī)性，保留其最原始純凈的形態(tài)、空間關(guān)系、變化與過渡，配合虛擬世界的靈活特性，還原最貼近真實(shí)的體驗(yàn)，達(dá)到簡潔與直觀的效果。
Material Design的設(shè)計(jì)原則如下：
- 實(shí)體感就是隱喻（通過系統(tǒng)的動效和合理的空間利用去打造與眾不同的觸感）；
- 鮮明、形象、深思熟慮（制定了基礎(chǔ)的平面設(shè)計(jì)規(guī)范，提升用戶體驗(yàn)）；
- 有意義的動畫效果（合理的有意義的動效可以吸引用戶的注意力，并且維持整個(gè)系統(tǒng)的連續(xù)性體驗(yàn)）；
對于Material Design就簡單介紹到這里，由于本人不是做設(shè)計(jì)的，就不擱這白話了，全憑大家用心去感受，如果大家對Material Design感興趣可以關(guān)注官方的文檔及規(guī)范。
麻溜滴，上DEMO
在我們的開發(fā)環(huán)境配置過程中，我們會用到node.js，so，沒有npm的同學(xué)請自行裝之。
請帶上你的依賴包
首先在我們的A、B、C、D、E、F、G任意盤上創(chuàng)建demo項(xiàng)目文件夾，執(zhí)行命令如下：
# 創(chuàng)建demo項(xiàng)目文件夾
mkdir material-ui
cd material-ui
# 初始化package.json文件
npm init
接下來安裝依賴包，擁為Material-UI在編寫時(shí)用到了ES2015的一些特性，所以在配置過程中我們會用到Babel( 一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境中執(zhí)行)。我們還會用到webpack（作為模塊加載器和打包工具），執(zhí)行命令如下：
# 安裝Material-UI部分
npm install --save material-ui
# 安裝React部分
npm install --save react react-dom react-tap-event-plugin
# 安裝Babel轉(zhuǎn)換器核心部分
npm install --save-dev babel-core babel-loader
# 安裝Babel轉(zhuǎn)換器的三個(gè)額外配置：ES2015（ES6），React，Stage1（ES7）
npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1
# 安裝webpack
npm install --save-dev webpack
配置Babel
上述過程如果順利完成的話，在 package.json 中添加一個(gè)對象babel，與"dependencies"保持同級。如果不順利的話，那么恭喜你，請?jiān)賮硪槐樯鲜鲞^程，與此同時(shí)面向西方開啟跪拜模式吧。。。
package.json內(nèi)容如下：
"babel" : {
"presets" : [
"es2015",
"react",
"stage-1"
],
"plugins": []
}
配置webpack
在我們項(xiàng)目根目錄下新建webpack的配置文件webpack.config.js，其內(nèi)容如下：
var path = require('path');
var webpack= require('webpack');
module.exports = {
entry: './entry.js', // 入口文件
output: {
path: path.join(__dirname, '/dist'), // 打包路徑
filename: 'bundle.js' // 打包文件名稱
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [ {
test: /\.jsx?$/,
loaders: ['babel']
} ]
}
}
寫一個(gè)AppBar
在項(xiàng)目根目錄下新建index.html，并引入我們生成的bundle.js，內(nèi)容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
創(chuàng)建entry.js，其內(nèi)容如下：
import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<AppBar title="Hello World!" />
</MuiThemeProvider>
);
ReactDOM.render(<App />, document.getElementById('app'));
在命令行中輸入webpack，執(zhí)行打包操作，執(zhí)行成功后，命令顯示如下：
現(xiàn)在可以看到目錄下有了一個(gè)dist/bundle.js，打開index.html，效果如圖所示：
至此，我們利用Material-UI的AppBar組件實(shí)現(xiàn)了一個(gè)簡單的頁面，除此之外Material-UI還實(shí)現(xiàn)了很多實(shí)用的組件，并且支持我們修改組件的主題，內(nèi)部樣式、顏色等定制化操作。到這里大家應(yīng)該對Material-UI有了初步的了解，如果想深入了解，還請參考其官網(wǎng)。
