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. ECMAScript5和ECMAScript6_浏览器支持情况

    ECMAScript5浏览器支持情况: Opera 11.60 Internet Explorer 9* Firefox 4 Safari 5.1** Chrome 13 * IE9不支持严格模式 - ...

  2. HDU 1405 The Last Practice 数学水题

    http://acm.hdu.edu.cn/showproblem.php?pid=1405 题目大意: 给你一个数,让你分解素因子,输出它的各次幂. 如60 输出:2 2 3 1 5 1 (60=2 ...

  3. 剪枝法观点下的旅行商问题(TSP)

    1. 构建基本的穷举搜索骨架 int n; int dst[100][100]; int best; const int INF = 987654321; // 初始状态下,path 存入第一节点,v ...

  4. 关于JavaScript概念的总结

    原文 https://www.jianshu.com/p/1e8d8a691aa8 大纲 1.JavaScript的概念 2.JavaScript 特点 3.JavaScript是弱类型语言 4.Ja ...

  5. Linux下kill进程脚本

    Linux下kill进程脚本 在Linux有时会遇到需要kill同一个程序的进程,然而这个程序有多个进程,一一列举很是繁琐,使用按名字检索,统一kill Perl脚本 使用方法 kill_all.pl ...

  6. [ES7] Await multi promises sequentially or concurrently

    Somtime 'async await' can have a bad effect on code proferemence. Let's take a look the below exampl ...

  7. Android 离线缓存的高速实现

    离线缓存是指在有网络的状态下将从server获取的网络数据.如Json 数据缓存到本地,在断网的状态下启动APP时读取本地缓存数据显示在界面上,经常使用的APP(网易新闻.知乎等等)都是支持离线缓存的 ...

  8. hdu 1292 &quot;下沙野骆驼&quot;ACM夏令营 (递推)

    "下沙野骆驼"ACM夏令营 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/ ...

  9. 《写给大忙人看的Java SE 8》——Java8新特性总结

    阅读目录 接口中的默认方法和静态方法 函数式接口和Lambda表达式 Stream API 新的日期和时间 API 杂项改进 参考资料 回到顶部 接口中的默认方法和静态方法 先考虑一个问题,如何向Ja ...

  10. 【t008】钱币变换问题

    Time Limit: 2 second Memory Limit: 32 MB [问题描述] 给定 2*n 个方格,将其排成一行.选择两个相邻的方格,设置为空方格,初始时不放钱币.而其余的方格共放入 ...