当前位置: 首页 > 工具软件 > materialUI > 使用案例 >

Material-UI入门文档

臧烨烁
2023-12-01
实在没找到中文的,只好看英文的了。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翻译。

 类似资料: