为了账号安全,请及时绑定邮箱和手机立即绑定

初识Material-UI

2018.08.15 12:42 7709浏览

简介

Material-UI是一组实现了谷歌Material Design设计原则的React组件集合,江湖传言使用Material-UI可以使我们的页面颜色更鲜艳,动画效果更突出(符合Material Design的设计风格),那么接下来就由我来带大家围观下吧~

627

Material-UI

What is Material Design

究竟什么是Material Design呢?

“设计是创造的艺术,我们的目标就是要满足不同的人类需要。人们的需要会随着时间发展,我们的设计,实践,以及理念也要随之提升。我们在自我挑战,为用户创造了一个可视化语言,它整合了优秀设计的经典原则和科学与技术的创新。这就是Material Design。” —— 关于Material Design,其亲爹谷歌是这么介绍的。

Material Design的设计风格如下图,其核心思想就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。

688

Material Design设计风格

Material Design的设计原则如下:

  • 实体感就是隐喻(通过系统的动效和合理的空间利用去打造与众不同的触感);

  • 鲜明、形象、深思熟虑(制定了基础的平面设计规范,提升用户体验);

  • 有意义的动画效果(合理的有意义的动效可以吸引用户的注意力,并且维持整个系统的连续性体验);

对于Material Design就简单介绍到这里,由于本人不是做设计的,就不搁这白话了,全凭大家用心去感受,如果大家对Material Design感兴趣可以关注官方的文档及规范

麻溜滴,上DEMO

在我们的开发环境配置过程中,我们会用到node.js,so,没有npm的同学请自行装之。

请带上你的依赖包

首先在我们的A、B、C、D、E、F、G任意盘上创建demo项目文件夹,执行命令如下:

# 创建demo项目文件夹mkdir material-uicd material-ui# 初始化package.json文件npm init

接下来安装依赖包,拥为Material-UI在编写时用到了ES2015的一些特性,所以在配置过程中我们会用到Babel( 一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境中执行)。我们还会用到webpack(作为模块加载器和打包工具),执行命令如下:

# 安装Material-UI部分npm install --save material-ui# 安装React部分npm install --save react react-dom react-tap-event-plugin# 安装Babel转换器核心部分npm install --save-dev babel-core babel-loader 
# 安装Babel转换器的三个额外配置:ES2015(ES6),React,Stage1(ES7)npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1# 安装webpacknpm install --save-dev webpack

配置Babel

上述过程如果顺利完成的话,在 package.json 中添加一个对象babel,与"dependencies"保持同级。如果不顺利的话,那么恭喜你,请再来一遍上述过程,与此同时面向西方开启跪拜模式吧。。。

package.json内容如下:

"babel" : { 
    "presets" : [ 
        "es2015",  
        "react", 
        "stage-1" 
    ], 
    "plugins": [] 
}

配置webpack

在我们项目根目录下新建webpack的配置文件webpack.config.js,其内容如下:

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'] 
        } ] 
    }
}

写一个AppBar

在项目根目录下新建index.html,并引入我们生成的bundle.js,内容如下:

<!DOCTYPE html><html lang="en"><head>    
    <meta charset="UTF-8">    
    <title></title></head>    <body>
    <div id="app"></div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="dist/bundle.js"></script></body></html>

创建entry.js,其内容如下:

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,执行打包操作,执行成功后,命令显示如下:

406

命令行输出信息

现在可以看到目录下有了一个dist/bundle.js,打开index.html,效果如图所示:

700

HelloWorld

至此,我们利用Material-UI的AppBar组件实现了一个简单的页面,除此之外Material-UI还实现了很多实用的组件,并且支持我们修改组件的主题,内部样式、颜色等定制化操作。到这里大家应该对Material-UI有了初步的了解,如果想深入了解,还请参考其官网



作者:桂圆_noble
链接:https://www.jianshu.com/p/144bd5c2f2b7


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消