Material-UI -- 初始上手篇

最新推荐文章于 2024-08-04 09:13:06 发布

weixin_33912445

最新推荐文章于 2024-08-04 09:13:06 发布

阅读量673

点赞数

文章标签： ui javascript python ViewUI

原文链接：https://my.oschina.net/codingBingo/blog/821865

版权

2019独角兽企业重金招聘Python工程师标准>>>

因为用了Android 7.0, 发现它的ui比之从前要好看了很多,于是就去找了一下它的ui框架,于是乎就找到了Material-UI这个骚东西,不得不说,它的ui还是要领先于国内很多ui框架的

那么接下来就介绍一下我的入手过程,先附上官网传送门,有兴趣的也可以自己去研究研究

Material-UI是google做的,所以当然是会支持自家产品Angular,同时它也支持时下最火的React

当然,像Ember,Backbone这些它也是支持的,因为Material-UI它仅仅是一个css框架,所以并没有我们想象中的那么有局限性,那么同理,它也支持Grunt,Gulp,Browserify,Webpack这些脚手架工具,ok,废话不多说,我们直接来看怎么用,

第一步当然还是安装 -- installation

npm install material-ui --save
npm install react-tap-event-plugin --save

ok,npm包装好之后就是引入 -ps:因为我这里用的是react,所以下面就还是用jsx来写啦

import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

要将 react-tap-event-plugin 这个组件引入,因为material-ui是一个兼容移动端的框架,所以引入这个组件,我们就可以在之后的coding中对于所有的 touch tap click事件用 onTouchTap() 来触发

第二步使用 -- usage

./App.js

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')
);

传统的React入口文件, 嗯~, 没毛病

./MyAwesomeReactComponent.js

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const MyAwesomeReactComponent = () => (
  <RaisedButton label="Default" />
);

export default MyAwesomeReactComponent;

上面这两个是官网上的两个例子,其实说白了吧,真的没什么,无非就是一些引用和调用的问题

至于ui怎么调用,剩下的就是看官网api的事情了

转载于:https://my.oschina.net/codingBingo/blog/821865