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. 谁要的手机用KRKR2 Onscripter 资源打包工具

    本软件能够把你手机上指定文件夹打包为文字冒险游戏资源文件 支持打包 1.Onscripter 的NSA格式 2.吉里吉里2(KRKR2)的XP3.(分2.29曾经的旧版本号和2.30以后新版本号) 3 ...

  2. 修改SVN中文件的可执行属性

    博文来自下面路径,转载请注明原出处: http://bigwhite.blogbus.com/logs/74568031.html 修改SVN中文件的可执行属性 - [开源世界] Tag:开源世界 S ...

  3. 超链接a的download属性 实现文件下载功能

    今天做项目遇到一个要点击按钮下载文件的功能. 百度之 知道了a的download属性.这是HTML5的新特性.主要功能是实现下载功能.主要语法是 <a href="url" ...

  4. jquery常用方法总结(转)

    取值与赋值操作 $("#ID").val(); //取value值 $("#ID").val("xxx"); //赋值 $("#I ...

  5. [Docker] Run, Stop and Remove Docker Containers

    In this lesson, we'll find out the basics of running Docker containers. We'll go over how to downloa ...

  6. 在VS2015中用C++创建DLL并用C++调用且同一时候实现对DLL的调试

    一:用C++创建DLL            依照[在VS2015中用C++编写可被其他语言调用的动态库DLL]提示创建C++编写的DLL.或參考[在VS2015中用C++创建DLL并用C#调用且同一 ...

  7. USACO--2.1The Castle

    思路:这个题目难在建图,開始的时候我想把每一个房间没有墙的面求出来,然后再和他邻近的房间加上一条边进行建图,后面发现要通过题目给定的条件求出房间那个面没有墙是十分困难的:后面參考了别人的思路,我们记录 ...

  8. SpringSecurity3.2.5自己定义角色及权限的教程

    近期阴差阳错的搞上了SpringSecurity3.由于是自己做的小系统.中间遇到了非常多坑,基本每一个坑都踩过了,网上也查了不少资料,发现有不少错误的.更是让我绕了一圈又一圈,如今把一些主要的东西总 ...

  9. Android Studio 连接自己搭建的server 须要admin 的帐号的问题 SSH Password Login,please enter password for user git@git.

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  10. python3 numpy API练习代码

    # -*- coding: utf-8 -*- import numpy as np; a=np.array([1,2,3,4,5,6]); print("数组是:",a) #数组 ...