您现在的位置:爱折腾>> web>>正文内容

Material UI实现谷歌Material Design设计规范的React组件

Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩、流畅的动画播放,以及卡片式的简洁设计。Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才是焦点。

Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React 组件。可以作为 NPM 安装包,使用 browserify 和 reactify 的依赖管理和 JSX 转换。

我们建议你在进入Material-UI前先了解一下React。Material-UI是一组反应元件,所以理解如何反应适合网络发展是很重要的,如果你不熟悉的Node.js,或单页应用程序的概念,在文档的网站快速的介绍之前你应该阅读一下。

安装Material-UI

Material-UI可以通过软件包安装只需要使用下面的代码

npm install material-ui

新安装后,你会发现所有的lib文件夹。在/src文件夹,JSX文件编译版本,你也可以直接下载Material-UI的源文件,然后引入到你的网页中。

使用方法

使用Material-UI组件非常简单。一旦你的项目引入了Material-UI,你就可以像下面的代码一样使用组件:

//Basic React component that renders a material-ui
//raised button with the text "Default"
const React = require('react');
const RaisedButton = require('material-ui/lib/raised-button');
const MyAwesomeReactComponent = React.createClass({
  render() {
    return (
        <RaisedButton label="Default" />
    );
  },
});
module.exports = MyAwesomeReactComponent;

相关链接

相关文章