欢迎关注Hadoop、Spark、Flink、Hive、Hbase、Flume等大数据资料分享微信公共账号:iteblog_hadoop
  1. 文章总数:961
  2. 浏览总数:11,499,432
  3. 评论:3873
  4. 分类目录:103 个
  5. 注册用户数:5847
  6. 最后更新:2018年10月17日
过往记忆博客公众号iteblog_hadoop
欢迎关注微信公众号:
iteblog_hadoop
大数据技术博客公众号bigdata_ai
大数据猿:
bigdata_ai

Material-UI:实现Google的Material模式的CSS框架

  Material-UI是实现了Google Material模式的CSS框架,其中包括了一系列的React组建。Material Design是2014年Google I/O发布的 势必将会成为统一 Android Mobile、Android Table、Desktop Chrome 等全平台设计语言规范,对从业人员意义重大。

  为了更好地使用这个框架,推荐大家先了解一下React Library,然后再使用Material-UI。


如果想及时了解Spark、Hadoop或者Hbase相关的文章,欢迎关注微信公共帐号:iteblog_hadoop

如何使用Material-UI

  Material-UI是以npm包形式提供的,所以你得这么安装:

npm install material-ui

  Material-UI use browserify and reactify for dependency management and JSX transformation,CSS 框架是使用Less编写的,所以你也得先编译它。

如何使用

  如果你项目已经引入了material-ui,你可以如下方式使用组建:

/**
 * User: 过往记忆
 * Date: 2015-05-02
 * Time: 上午08:16
 * bolg: https://www.iteblog.com
 * 本文地址:https://www.iteblog.com/archives/1338
 * 过往记忆博客,专注于hadoop、hive、spark、shark、flume的技术博客,大量的干货
 * 过往记忆博客微信公共帐号:iteblog_hadoop
  */
var React = require('react'),
  mui = require('material-ui'),
  RaisedButton = mui.RaisedButton;

var SomeAwesomeComponent = React.createClass({

  render: function() {
    return (
        <RaisedButton label="Default" />
    );
  }

});

module.exports = MyAwesomeReactComponent;

下载地址及文档

  Material-UI的下载请到这里:https://github.com/callemall/material-ui

  关于如何使用Material-UI,请到Material-UI的官方网站参见里面的文档:http://material-ui.com(貌似这个网站需要翻墙)。

本博客文章除特别声明,全部都是原创!
转载本文请加上:转载自过往记忆(https://www.iteblog.com/)
本文链接: 【Material-UI:实现Google的Material模式的CSS框架】(https://www.iteblog.com/archives/1338.html)
喜欢 (14)
分享 (0)
发表我的评论
取消评论

表情
本博客评论系统带有自动识别垃圾评论功能,请写一些有意义的评论,谢谢!
(1)个小伙伴在吐槽
  1. Material-UI npm 是怎么安装? 可以加你QQ吗?
    qqq081362016-01-15 11:44 回复