Material-UI采用 Material Design风格的React UI组件,所以要想学习material ui先要了解react。

material ui安装

Material-UI 可以使用 npm package安装.

react-tap-event-plugin

Material-UI使用react-tap-event-plugin来监听touch/tap/click 事件,使之得到快速的响应,这个插件是临时的,一旦React的官方发布相应的插件,我们将马上去掉。但是, 在那之前,你一定要在你的应用启动时注入这个插件。

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

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

react-tap-event-plugin 对React所有组件都提供了一个 onTouchTap() 方法,去处理手机端的点击事件,快速响应我们的应用程序。这对于button非常有用。

Roboto 字体

Material-UI 采用 google Roboto 字体,所以请确保在项目中引入字体。

关于Roboto字体详细介绍请参考: Roboto 介绍

ES 编译器

我们这里的示例都使用了ECMAScript规范中的stage-1功能,要在您本地运行这些示例,您可能还要安装Babel插件来解析ES语法。

Material-UI更详细资料可以访问material ui中文网

开始使用Material UI的更多相关文章

  1. Material UI – Material Design CSS 框架

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

  2. 仿Material UI框架的动画特效

    Material UI是一款功能非常强大,界面却十分清新简洁的CSS框架,Material UI利用了Google的Material Design 全新设计语言,并且让每一个UI组件都变得非常独立,因 ...

  3. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  4. Material UI:很强大的CSS框架

    Material UI 是一款功能很强大,界面却十分清新简洁的CSS框架.Material UI利用了Google的Material Design 全新设计语言.而且让每个UI组件都变得很独立.因此开 ...

  5. material UI中withStyles和makeStyles的区别

      在material UI中,withStyles和makeStyles是经常使用的两个用于封装样式的函数.对于刚使用material UI的开发者而言,可能不太清楚这两者的区别.   本文简要探究 ...

  6. 解决material UI中弹窗(dialog、popover等)内容被遮挡问题

    在material ui中有几种弹出层,比如:dialog.popover等,这些弹出层都会遇到的一个公共问题是: 假如弹出层中的内容变化了,弹出层的位置并不会重新定位. 这样,假如一开始弹出层定位在 ...

  7. material UI中子组件样式修改的几种方案研究

      material UI是一个流行的与React配套的前端UI框架,对于开发者而言,熟悉它的样式修改方案是必要的.但目前相关资料并不直观,并且没有总结到一起.如果对相关特性不太清楚,开发者很可能会在 ...

  8. WPF material UI 的使用

    网站:https://github.com/vasanthmes/WPF-Dashboard-UI-Material-Design-Concept theme <Application x:Cl ...

  9. 安装 Angular Material UI

    文档 调色板 安装 ng add @angular/material ? Choose a prebuilt theme name, or "custom" for a custo ...

随机推荐

  1. BZOJ 2245 SDOI 2011 工作安排 费用流

    题目大意:有一些商品须要被制造.有一些员工.每个员工会做一些物品,然而这些员工做物品越多,他们的愤慨值越大,这满足一个分段函数.给出哪些员工能够做哪些东西,给出这些分段函数,求最小的愤慨值以满足须要被 ...

  2. andriod first app-computer

    andriod first app-computer 个人信息:就读于燕大本科软件project专业 眼下大三; 本人博客:google搜索"cqs_2012"就可以; 个人爱好: ...

  3. 27、从零写UVC驱动之分析数据传输(设置ubuntu通过串口打印,指定打印到文件,ubuntu切换root用户)

    A. 设置ubuntu让它从串口0输出printk信息a. 设置vmware添加serial port, 使用文件作为串口(在vmware中设置,文件是保存在windows中)b. 启动ubuntu, ...

  4. [Node] Use babel-preset-env with Native Node Features and Also Use Babel Plugins

    In this lesson we'll show how to setup a .babelrc file with presets and plugins. Then create npm scr ...

  5. Facebook Hacker Cup 2015 Round 1--Winning at Sports(动态规划)

    原题:pid=688426044611322&round=344496159068801">https://www.facebook.com/hackercup/problem ...

  6. poj 2955 Brackets 括号匹配 区间dp

    题意:最多有多少括号匹配 思路:区间dp,模板dp,区间合并. 对于a[j]来说: 刚開始的时候,转移方程为dp[i][j]=max(dp[i][j-1],dp[i][k-1]+dp[k][j-1]+ ...

  7. ajax上传图片文件

    这里用的是一个隐藏的iframe,这样可以让form表单提交到这个iframe里面,用户就看不到页面的刷新了 前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题 ...

  8. MySQL搜索:WHERE

    MySQL指定搜索条件进行搜索能够使用where条件. 在SELECT语句中.数据依据WHERE子语句中指定的条件进行过滤,WHERE子语句在表名之后给出. product表例如以下: a 查找价格等 ...

  9. 复制相关参数学习笔记--master上的参数

    特别声明: 所有的过滤规则不建议在主库上设置.     server_id 是一个整数,范围:1 至 power(2,32)-1 之间. 推荐使用端口号+ip最后一位的方式. 唯一区别ID,同一个集群 ...

  10. 无法为数据库中的对象分配空间,因为'PRIMARY'文件组已满

    用SQL Server2012,做数据保存时出错,错误信息:无法为数据库'***'中的对象'***'分配空间,因为'PRIMARY'文件组已满.请删除不需要的文件.删除文件组中的对象.将其他文件添加到 ...