当前位置: 首页 > 软件库 > Web应用开发 > CSS框架 >

Material UI

Material Design 的 React 实现
授权协议 MIT
开发语言 JavaScript HTML/CSS
所属分类 Web应用开发、 CSS框架
软件类型 开源软件
地区 不详
投 递 者 羿易安
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Material UI 是一套实现了 Google 的 Material Design 全新设计语言的 CSS 框架。Material UI 提供了 npm 包的形式,使用示例:

/**
 * @jsx React.DOM
*/

var React = require('react'),
  mui = require('material-ui'),
  PaperButton = mui.PaperButton;

var SomeAwesomeComponent = React.createClass({

  render: function() {
    return (
        <PaperButton type={PaperButton.Types.FLAT} label="Default" />
    );
  }

});

module.exports = SomeAwesomeComponent;

  • 文档:https://material-ui.com/zh/components/grid/   1.简介   Material Design 响应式布局的栅格可适应屏幕大小和方向,确保布局在不同尺寸之间的一致性。 栅格既能够确保在不同布局下的一致性,同时也能够在众多不同设计中保持其灵活性。 Material Design 的响应式 UI 是基于 12 列的栅格布局。   2.属性   将ref被

  • MaterialUI ReactUI组件库,用于快速构建界面和设计系统。官网默认版本为v4.11.1(截止到2021年3月11日)。 安装 支持使用npm或者使用CDN加载。 npm npm install @material-ui/core CDN 加载Roboto字体 <link rel="stylesheet" href="https://fonts.googleapis.com/css?

  • material ui In the world of web design, CSS breakpoints help us design a more robust, responsive website, detecting when to show and hide certain elements, resizing components to fit, or stretch on mo

  • 作者:知乎用户 链接:https://www.zhihu.com/question/51040975/answer/208582603 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 有关 Material Design 的 UI 库我用过一些,在用 Material-UI 之前用的是 Google 官方的 Material Design Lite,这是一个纯前端

  • React + material-ui + react-hook-form实现react表单控制 CustomForm.jsx import React from "react"; import { FormControl } from "@material-ui/core"; import { useForm } from "react-hook-form"; import { InputFie

  • 第一步:安装material和cdk和animations,一个也不能缺,否则会报错。 npm install --save @angular/material @angular/cdk @angular/animations 第二步:在核心模块引入BrowserAnimationsModule和需要用到的material组件 1 import { NgModule } from '@angu

  • 文档:https://material-ui.com/zh/customization/breakpoints/ 1.默认断点 每个断点(一个键)匹配了一个固定的屏幕宽度(一个值): ** xs, ** 超小:0px ** sm, **小:600px ** md, **中等:960px ** lg, **大:1280px ** xl, **超大:1920px 这些断点值用于确定断点范围。 一个断点

  • 在使用android自带的Navigation Drawer Activity时,想要修改默认的布局格式有些困难,在此找到了一个自定义的ui设计达到预想的结果。 链接;http://blog.csdn.net/JiangWeiHu/article/details/72631136 

  • Autocomplete 有一个 filterOptions方法:可以自由决定哪些选项可用,哪些将隐藏。 如果只想显示所有选项,只需实现filterOptions返回所有值: filterOptions={(options, state) => options} 实现 不区分大小写模糊查询 项目名或编码: <Autocomplete value={values.fundSource}

  • const options = [ 'Selected Item 1', 'Selected Item 2', 'Selected Item 3']; export default function App() { const [selected, setSelected] = useState([]); const isAllSelected = options.len

  • 地址:https://github.com/mui-org/material-ui   1.安装   // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core   2,集成   2.1 _app.tsx   import React from 'react'; import PropType

 相关资料
  • 大家好!我希望你一切安好? 我目前正在开发一个简单的应用程序,以了解有关Spring Boot、Spring Security性、jpa和服务器端分页的更多信息。 我成功地构建了我的API,并且我有一个使用分页的控制器。为了使用这个API,我开发了一个反应应用程序,一切都可以按照我想要的方式工作(2FA,帐户创建,登录,忘记密码,更改密码,...)。 但现在,我想开发一个管理界面,在其中我希望能够

  • 本文向大家介绍React实现todolist功能,包括了React实现todolist功能的使用技巧和注意事项,需要的朋友参考一下 一、index.js 二、TodoList 1、constructor 2、render 3、getTodoList 4、事件函数 5、网络请求 使用Charles代理网络,安装证书,设置端口,在手机上面打开网络WIFI,设置代理IP和端口,这样就能监听到手机访问的网

  • 我在React应用程序上使用状态实现时遇到了困难。当nextProps没有从this.props更改时,我想防止组件再次加载,它工作得很好,但它搞乱了值,我找不到原因。

  • 本文向大家介绍React-Router的实现原理是什么?相关面试题,主要包含被问及React-Router的实现原理是什么?时的应答技巧和注意事项,需要的朋友参考一下 1.react-router依赖基础 - history,是一个独立的第三方js库,可以用来兼容在不同浏览器、不同环境下对历史记录的管理,拥有统一的API。具体来说里面的history分为三类: HashRouter:老浏览器的hi

  • 本文向大家介绍React路由鉴权的实现方法,包括了React路由鉴权的实现方法的使用技巧和注意事项,需要的朋友参考一下 前言 上一篇文章中有同学提到路由鉴权,由于时间关系没有写,本文将针对这一特性对 vue 和 react 做专门说明,希望同学看了以后能够受益匪浅,对你的项目能够有所帮助,本文借鉴了很多大佬的文章篇幅也是比较长的。 背景 单独项目中是希望根据登录人来看下这个人是不是有权限进入当前页

  • 本文向大家介绍React 项目迁移 Webpack Babel7的实现,包括了React 项目迁移 Webpack Babel7的实现的使用技巧和注意事项,需要的朋友参考一下 不久前写了一篇webpack 4 升级迁移 这里简单说下 React 项目的一些配置; 首先我们新建项目 react-web ,然后进入项目初始化 package.json ; 接下来我们安装 webpack ,这里需要注意

  • 本文向大家介绍React中jquery引用的实现方法,包括了React中jquery引用的实现方法的使用技巧和注意事项,需要的朋友参考一下 在React中引用Jquery比较好玩,获取元素的数据更多 1.引入方法举例: 2.界面样式 3. 控制台打印结果  4.text对象部分属性 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍React实现评论的添加和删除,包括了React实现评论的添加和删除的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了React实现评论添加和删除的具体代码,供大家参考,具体内容如下 一、效果图 二、需求描述 1. 手动输入用户名和评论内容,点击提交;输入内容被追加到右侧评论列表; 2.  点击评论列表的“删除”按钮,弹框提示确定删除用户“xx”; 3. 点击“确定”,“