美文网首页react
Material-UI | 轻松上手

Material-UI | 轻松上手

作者: 夏海峰 | 来源:发表于2018-02-24 22:22 被阅读24334次
bg.png

Material-UI是一个实现了Google's Material Design设计规范的react组件库,开箱即用,使用它可以快速搭建出赏心悦目的应用界面。

一、安装

npm install --save material-ui@next

npm install --save material-ui-icons

二、基本使用

MUI的使用和大多数其它UI框架的区别,它是按需加载的,即需要什么组件引入相应组件即可,比如需要使用Button,就import Button from "material-ui/Button"即可,使用其它组件与此一致。这有利于在bundle打包时,大大地减小bundle体积。

user.png

三、自定义theme主题

使用createMuiTheme创建自定义的theme主题,用MuiThemeProvider包裹MUI组件即可让自定义主题生效。

custom.png

四、Color System

Material-UI提供了一套color system,源码见material-ui/styles/color.js,对颜色进行命名并导出,如red50, red100, redA100等。通过官方提供的Color Tool(https://material.io/color/#!/?view.left=0&view.right=0)可以方便地为你创建一套颜色模板。

color.png

五、Icons

Material-UI使用几何图形,形象化地提供了一套FontIcon和SvgIcon。推荐使用SvgIcon,使用方法如下,

先安装 npm install material-ui-icons -S。

然后按需引入所需要的icon,比如:import AccessAlarmIcon from 'material-ui-icons/AccessAlarm';即可使用AccessAlarmIcon了。

六、Layout

Material-UI提供了响应式UI、Grid布局功能。另外Material-UI组件的外观样式采用的是css in js的方式,使用css in js来写css样式,可以方便且灵活地自定义元素样式。

css in js.png

七、Utils

Material-UI提供了Modal模态框、Popover窗口、Portal等UI工具,还提供了Transitions过渡动画功能。

八、Components

Material-UI提供了近30种按需加载、开箱即用的组件,包括List、Avatar、App Bar、Menu、Picker等常用组件。与组件对应,还提供了若干组件API,为组件更好的用户体验提供了交互功能。在Material-UI官网上,每种组件的使用都有代码演示:

card.png card-code.png

九、小结

Material-UI的界面设计,倾向于同时兼顾PC端和移动端。它的主题和样式可以极其灵活地进行个性化定制,Material-UI对Color和Theme进行了良好封装,采用CSS in JS可以方便地帮助我们完成个性化需求。它还支持服务端渲染。总体上,Material-UI使用还算简单,只需要我们有一定的单页面应用开发基础、会使用react,就可以快速上手。在Material-UI的Github仓库中,还有四五个demo,有助于我们参考学习。

参考资源:

1、Material-UI官网:https://material-ui-next.com/

2、Github仓库:https://github.com/mui-org/material-ui

XiaBiBi.jpg

相关文章

  • Material-UI | 轻松上手

    Material-UI是一个实现了Google's Material Design设计规范的react组件库,开箱...

  • React Material-UI笔记--theme篇

    Material-UI版本:v1.0.0-beta.11 原文连接:Material-UI Theme 在线查看:...

  • React 移动端框架

    1. Material-UI Material-UI 组件是独立工作的。 它们是自我支持的,并只要注入而且仅注入它...

  • React 移动端框架

    1. Material-UI Material-UI 组件是独立工作的。 它们是自我支持的,并只要注入而且仅注入它...

  • 学习网站

    Vue、React、Angular、material-ui、webpack、mock、echarts、babelj...

  • 词云可视化:四行Python代码轻松上手到精通

    词云可视化:四行Python代码轻松上手到精通 词云可视化:四行Python代码轻松上手到精通 本课概要 关于本课...

  • 轻松上手、快速盈利

    投资开个加盟店经营不困难,DS16°C私房米线总部采用的是标准化操作流程,怎样开店、怎样进货、怎样培训、怎样经营,...

  • ReactNative ListView轻松上手

    感觉自己需要提一下了,最近简单的写了个demo练练手,主要记录下自己的收获。 在移动开发中我们用得最多和最重要的一...

  • 轻松上手Grid布局

    Grid布局和之前的使用浮动布局思路上有很大不同,使用浮动布局更多的像时画页面,而Grid布局从意义上面更接近布局...

  • material-ui

    https://material-ui.com/

网友评论

    本文标题:Material-UI | 轻松上手

    本文链接:https://www.haomeiwen.com/subject/lwgcxftx.html