vlambda博客
学习文章列表

想做前端开发,试试这款React组件库

  大家好,我是为广大程序员兄弟操碎了心的小编,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效率,实现不加班不熬夜不掉头发,是我的目标!

  今天给大伙推荐一个React UI组件库MATERIAL-UI。MATERIAL-UI是一款用来实现Google的Material Design风格UI界面的框架,也是首个React的UI工具集之一。


安装

通过 npm 安装 Material-UI 的源码

$ npm install @material-ui/core

或者也可以使用 CDN加载默认的 Roboto 字体

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

若您想使用 Icon 组件,前提条件是安装了 Material icons字体

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

若想使用图标可用如下方式安装:

// 通过 npm
npm install @material-ui/icons

// 通过 yarn
yarn add @material-ui/icons

快速入门

下面是来帮助您入门的一个快速示例

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App({
  return (
    <Button variant="contained" color="primary">
      你好,世界
    </Button>

  );
}

ReactDOM.render(<App />document.querySelector('#app'));

项目预览

登录页面示例:一个简单的登录页面

想做前端开发,试试这款React组件库

控制面板示例:这是一个含有任务栏和迷你变体抽屉的最小化管理面板。这个图表由 Recharts 提供,但是很容易替换成其他的

想做前端开发,试试这款React组件库

相册示例:这是一个包含了 hero 的单元和页脚的响应式相册 / 展览页面布局。

想做前端开发,试试这款React组件库

定价页面示例:使用此页面布局,可以快速的为潜在客户创建一个高效的价格表。

支付页面示例:这是一个逐步建立的支付页面布局。可以根据具体需求来调整步骤,或者只采用部分步骤。


结尾