开始使用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 ...
随机推荐
- Apache多虚拟主机多版本PHP(5.3+5.6+N)共存运行配置全过程
摘要: 为需要实现在同一台Linux服务器上面,同时运行多个不同版本的PHP程序,本文我们将使用FastCGI方式加载,并把过程详细记录下来方便大家参考. 常规的PHP配置方式有很多种,例如CGI.f ...
- Caffe 学习:Crop 层
在Fully Convolutional Networks(FCN)中,会用到Crop 层,他的主要作用是进行裁切.下面我们举一个例子来说明如何使用Crop 层. Caffe中的数据是以 blobs形 ...
- C++ 指针(不论什么一个指针本身的类型都是unsigned long int型)
1.指针数组: 即 数组的元素是指针型; 例:int*pa[2]; 明明是一维的指针数组.竟当作二维数组用. [cpp] view plain copy //利用指针数组存放单位矩阵 #include ...
- 自行实现透明的控件如Panel GroupBox(使用不需要重绘父控件的效果,一切都因为窗口有了WS_EX_TRANSPARENT属性)
CSDN的Blog开通了.我想这里的Blog作为今后自己回答别人问题的时候,收藏答案的地方很不错呢. 因为社区的贴子早晚都会沉下去,查找起来很不方便,甚至再也找不到呢. Q: http://commu ...
- Seagate-保修验证(za25shrx)
保修验证 http://support.seagate.com/customer/zh-CN/warranty_validation.jsp Seagate 保修验证 End User ...
- word-vba-microsoft(中英文)
中文 https://msdn.microsoft.com/zh-cn/vba/word-vba/articles/view-displaypageboundaries-property-word 英 ...
- request与response对象详述
request与response对象. 1. request代表请求对象 response代表的响应对象. 学习它们我们可以操作http请求与响应. 2.request,response体系结构. 在 ...
- activiti自己定义流程之整合(五):启动流程时获取自己定义表单
流程定义部署之后,自然就是流程定义列表了,但和前一节一样的是,这里也是和之前单独的activiti没什么差别.因此也不多说.我们先看看列表页面以及相应的代码,然后在一步步说明点击启动button时怎样 ...
- 利用performSelectorInBackground和performSelectorOnMainThread实现多线程
NSObject类的performSelectorOnMainThread和performSelectorInBackground能够实现简单的多线程编程技术 1.- (void)performSel ...
- Methods and systems to control virtual machines
Methods and systems are provided to control the execution of a virtual machine (VM). A VM Monitor (V ...