开始使用Material UI
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的更多相关文章
- Material UI – Material Design CSS 框架
Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才 ...
- 仿Material UI框架的动画特效
Material UI是一款功能非常强大,界面却十分清新简洁的CSS框架,Material UI利用了Google的Material Design 全新设计语言,并且让每一个UI组件都变得非常独立,因 ...
- 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 ...
- Material UI:很强大的CSS框架
Material UI 是一款功能很强大,界面却十分清新简洁的CSS框架.Material UI利用了Google的Material Design 全新设计语言.而且让每个UI组件都变得很独立.因此开 ...
- material UI中withStyles和makeStyles的区别
在material UI中,withStyles和makeStyles是经常使用的两个用于封装样式的函数.对于刚使用material UI的开发者而言,可能不太清楚这两者的区别. 本文简要探究 ...
- 解决material UI中弹窗(dialog、popover等)内容被遮挡问题
在material ui中有几种弹出层,比如:dialog.popover等,这些弹出层都会遇到的一个公共问题是: 假如弹出层中的内容变化了,弹出层的位置并不会重新定位. 这样,假如一开始弹出层定位在 ...
- material UI中子组件样式修改的几种方案研究
material UI是一个流行的与React配套的前端UI框架,对于开发者而言,熟悉它的样式修改方案是必要的.但目前相关资料并不直观,并且没有总结到一起.如果对相关特性不太清楚,开发者很可能会在 ...
- WPF material UI 的使用
网站:https://github.com/vasanthmes/WPF-Dashboard-UI-Material-Design-Concept theme <Application x:Cl ...
- 安装 Angular Material UI
文档 调色板 安装 ng add @angular/material ? Choose a prebuilt theme name, or "custom" for a custo ...
随机推荐
- LA 2678 – Subsequence
看到限时3S,自己写了一个二重循环的,然后华丽的 TLE...T T 瞄了瞄书上,作者的思路果然是很好.膜拜中. 他只枚举了终点,然后用二分查找. 用到了lower_bound函数,这个lower_b ...
- Arcgis engine 指定图层对要素进行创建、删除等操作
Arcgis engine 指定图层创建点要素 在指定的图层上创建一个点要素,点要素的位置是通过X,Y坐标指定的,下面是具体的注释 .其中 和IFeatureClassWrite接口有关的代码不要好像 ...
- [CSS] Use Generated Content to Augment Information
When you create a pseudo element, you have access to the parent HTML attributes. They can be used in ...
- [RxJS] Reusable multicasting with Subject factories
The way we use publish() (or multicast with an RxJS Subject) makes the shared Observable not reusabl ...
- 【u122】迎接仪式
Time Limit: 1 second Memory Limit: 128 MB [问题描述] LHX教主要来X市指导OI学习工作了.为了迎接教主,在一条道路旁,一群Orz教主er穿着文化衫站在道路 ...
- java之 ------ 枚举类型
枚举 一.枚举类型具体说明 简单的说.Enum一般用来表示一组同样类型的常量. 如性别.日期.月份.颜色等.对这些属性用常量的优点是显而易见的,不仅能够保证单例,且在比較的时候能够用"==& ...
- Windows共享上网的做法
作者:朱金灿 来源:http://blog.csdn.net/clever101 现在有这样一个网络应用场景:A机器是一个PC台式机,处在两个网络中,一个是处在192.168.30.1到192.168 ...
- 【t009】最大矩形面积
Time Limit: 2 second Memory Limit: 32 MB [问题描述] 在x轴上水平放置着N个矩形,每个矩形都有相同的宽度,但是它们的高度并不相同. 比如,图1包含的矩形的高分 ...
- 【C++竞赛 H】The sum problem
Time Limit: 1s Memory Limit: 32MB 问题描述 Given a sequence 1,2,3,-,N, your job is to calculate the numb ...
- Android JNI编程(四)——C语言多级指针、数组取值、从控制台输入数组
版权声明:本文出自阿钟的博客,转载请注明出处:http://blog.csdn.net/a_zhon/. 目录(?)[+] 一:前面我们介绍了一级指针的相关概念和用发,今天我们就来说一说多级指针. 1 ...