Material UI 5 学习01-按钮组件

Material UI 5 学习01-按钮组件

  • 一、安装Material UI
  • 二、 组件
    • 1、Button组件
      • 1、基础按钮
      • 2、variant属性
      • 3、禁用按钮
      • 4、可跳转的按钮
      • 5、disableElevation属性
      • 6、按钮的点击事件onClick
    • 2、Button按钮的颜色和尺寸
      • 1、Button按钮的颜色
      • 2、按钮自定义颜色
      • 3、Button按钮的尺寸
    • 3、图标按钮
      • 1、带有图标的按钮

一、安装Material UI

首先我们创建React工程。然后安装样式和字体。下面使用yarn安装

//Material UI
yarn add @mui/material @emotion/react @emotion/styled
//styled-components
yarn add @mui/material @mui/styled-engine-sc styled-components
//安装Roboto字体
yarn add @fontsource/roboto
//安装MUI图标
yarn add @fontsource/roboto//在public index.html引入google字体样式
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/>
//在public index.html引入google MUI字体样式
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>

二、 组件

我们先学习MUI的组件

1、Button组件

1、基础按钮

最基本的button按钮定义:

import {Button} from "@mui/material";
function App() {return (<div><Button>这是一个按钮</Button></div>);
}
export default App;

在这里插入图片描述
可以看出,最基本的按钮没有边框,字体默认是蓝色的,其鼠标点击上去有背景颜色,是淡蓝色。其他的就没有什么了。
在这里插入图片描述

2、variant属性

序号属性值含义
1text文本按钮,这个是按钮的默认属性。文本按钮 通常用于不太明显的动作,包括那些位于对话框、卡片中的动作。 在卡片中,文本按钮有助于保持卡片内容的重点。
2contained包含按钮。包含按钮 是高度强调的,以其使用的抬高和填充来区分。 它们包含对你的应用来说是主要的操作。
3outlined轮廓按钮。轮廓按钮也是包含按钮的一种较低强调度的选择, 或者更强调文本按钮的替代品。

代码演示:

<Button variant='text'>这是一个文本按钮</Button>
<Button variant='contained'>这是包含按钮</Button>
<Button variant='outlined'>这是轮廓按钮</Button>

在这里插入图片描述

3、禁用按钮

加上disabled属性可以禁用按钮。默认是true。false就不是禁用了。

<Button variant='text' disabled>禁用文本按钮</Button>

4、可跳转的按钮

加尚href属性,可以进行跳转

<Button variant='text' href="#">禁用文本按钮</Button>
import {Button} from "@mui/material";
function App() {return (<div><Button variant='text'>这是一个文本按钮</Button><Button variant='text' disabled>禁用文本按钮</Button><Button variant='text' href="#">禁用文本按钮</Button></div>);
}
export default App;

在这里插入图片描述

5、disableElevation属性

disableElevation是禁用阴影的意思。加上此属性,那么点击按钮没有阴影。
默认的按钮点击之后都存在阴影,左边的按钮是默认的按钮,右边的加了disableElevation属性,因此右边的点击没有阴影
在这里插入图片描述
在这里插入图片描述

6、按钮的点击事件onClick

import {Button} from "@mui/material";function App() {const showData = () => {alert('按钮被点击了');}return (<div><Button onClick={showData} variant='contained'>按钮</Button></div>);
}export default App;

上面的代码也可以简写:

import {Button} from "@mui/material";
function App() {return (<div><Button onClick={()=>{alert("按钮被点击")}} variant='contained'>按钮</Button></div>);
}
export default App;

2、Button按钮的颜色和尺寸

1、Button按钮的颜色

按钮使用color属性即可设置值:color=“primary”
默认的按钮属性值有7个

序号属性值含义
1color=“inherit”按钮文字的颜色取决于父组件的颜色
2color=“primary”强调重要行为的按钮
1color=“secondary”次要行为的按钮
1color=“success”显示操作成功的按钮
1color=“error”显示操作错误的按钮
1color=“info”陈述按钮
1color=“warning”警告按钮

在这里插入图片描述
|
在这里插入图片描述

2、按钮自定义颜色

使用Theme自定义颜色
创建Theme.jsx文件,编写自定义的样式

import {createTheme} from "@mui/material";
export const  theme = createTheme({palette: {primary: {main: '#000000',},secondary: {main: '#F5EBF7',light: '#F5EBFF',contrastText: '#47008F',},},
});

在index中使用ThemeProvider引入theme

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {ThemeProvider} from "@mui/material";
import {theme} from './Theme'const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><ThemeProvider theme={theme}><App /></ThemeProvider></React.StrictMode>
);reportWebVitals();

最后在按钮中应用

import {Button, Stack} from "@mui/material";function App() {return (<div ><Stack spacing={3}><Button variant='contained' color="primary">主要的按钮</Button></Stack></div>);
}
export default App;

由于自定义的primary为黑色,所以最终按钮呈现黑色
在这里插入图片描述

疑惑点:Button好像颜色属性只能从那7个属性值去选择。虽然可以自定义7个属性值的颜色。但是无法使用main、light、dark更为详细的定义。Box就可以定义具体的色调

export const  theme = createTheme({palette: {primary: {main: '#000000',light: '#F5EBF7',contrastText: '#80ff80',/*文本颜色*/},secondary: {main: '#F5EBF7',light: '#F5EBFF',contrastText: '#47008F',},},
});

也就是说Button组件默认就是main。不知道如何使用light。

3、Button按钮的尺寸

使用size属性申明

序号属性含义
1size=“small”小按钮
2size=“medium”中按钮
3size=“large”大按钮
import {Button, Stack} from "@mui/material";function App() {return (<div ><Stack spacing={3}><Button variant='contained' size="small">按钮1</Button><Button variant='contained' size="medium">按钮2</Button><Button variant='contained' size="large">按钮3</Button></Stack></div>);
}
export default App;

在这里插入图片描述

3、图标按钮

使用图标,可以直接在Material Icons中选择,前提是安装icon库

yarn add @mui/icons-material @mui/material @emotion/styled @emotion/react

1、带有图标的按钮

序号属性含义
1startIcon={<图标组件/>}在按钮文字前面的图标
2endIcon={<图标组件 />}在按钮文字之后的图标
import {Button, Stack} from "@mui/material";
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';function App() {return (<div ><Stack spacing={3}><Button variant="outlined" startIcon={<DeleteIcon />}>Delete</Button><Button variant="contained" endIcon={<SendIcon />}>Send</Button></Stack></div>);
}
export default App;

上面的代码引入了两个图标组件DeleteIcon 、SendIcon 。图标可以自定搜索
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/719454.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MacOS包管理工具homebrew使用教程

MacOS包管理工具homebrew使用教程 1.概述与安装2.基本使用3.其他常用命令 1.概述与安装 homebrew是Mac OS X上的强大的包管理工具&#xff0c;可以高效管理各种软件包 安装&#xff1a; 1、安装xcode&#xff1a; xcode-select --install2、一行命令下载&#xff1a; /bin…

DreamTalk:单张图像即可生成逼真人物说话头像动画,助力AI数字人落地

“DreamTalk: When Expressive Talking Head Generation Meets Diffusion Probabilistic Models” DreamTalk是一个基于扩散的音频驱动的富有表现力的说话头生成框架&#xff0c;可以生成不同说话风格的高质量的说话头视频。DreamTalk对各种输入表现出强大的性能&#xff0c;包…

Thingsboard本地源码部署教程

本章将介绍ThingsBoard的本地环境搭建&#xff0c;以及源码的编译安装。本机环境&#xff1a;jdk11、maven 3.6.2、node v12.18.2、idea 2023.1、redis 6.2 环境安装 开发环境要求&#xff1a; Jdk 11 版本 &#xff1b;Postgresql 9 以上&#xff1b;Maven 3.6 以上&#xf…

vue实现循环滚动列表

本文章使用 vue-seamless-scroll 为大家分享了vue实现循环滚动列表的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下&#xff1a; vue实现循环滚动列表 1.安装插件 vue-seamless-scroll vue-seamless-scroll 实例文档 npm install vue-seamless-scroll --save 2.HTM…

代码随想录算法训练营Day50 | 123.买卖股票的最佳时机 III、188.买卖股票的最佳时机 IV

123.买卖股票的最佳时机 III 思路与 121.买卖股票I 一脉相承&#xff0c;一次买卖有2种状态&#xff08;持有/不持有&#xff09;&#xff0c;那么两次买卖就有4种状态&#xff08;第一次持有/不持有、第二次持有/不持有&#xff09; 1、DP数组定义&#xff1a; dp[i][j]为当前…

【Java】Base理论的核心思想和理论三要素

目录 简介 BASE 理论的核心思想 BASE 理论三要素 1. 基本可用 2. 软状态 3. 最终一致性 总结 简介 BASE 是 Basically Available&#xff08;基本可用&#xff09; 、Soft-state&#xff08;软状态&#xff09; 和 Eventually Consistent&#xff08;最终一致性&#xf…

深度强化学习系列【2】- 贝尔曼方程和马尔可夫决策过程

引言: 一直想做点强化学习相关的内容,但是对于其原理一直不是太明了,相比于编程实现,懂得算法部分的机理与理论也是至关重要的。网上找的一些资料都在强调贝尔曼方程和马尔可夫决策过程在强化学习中的作用,但是介绍都不够充分。 另外,在知乎【1】上看到一个说法,说 强化学…

财报解读:基本盘稳定后,联想如何进一步抢占AI时代?

从2021年下半年开始&#xff0c;受诸多因素影响&#xff0c;消费电子行业始终处在承压状态&#xff0c;“不景气”这一关键词屡次被市场提及。 但寒气没有持续&#xff0c;可以看到&#xff0c;消费电子行业正在逐渐回暖。国金证券在今年1月的研报中就指出&#xff0c;从多方面…

【简单模拟】第十一届蓝桥杯省赛第二场C++ B组 / C组《成绩统计》(c++)

1.题目说明 小蓝给学生们组织了一场考试&#xff0c;卷面总分为100 分&#xff0c;每个学生的得分都是一个 0 到 100 的整数。 如果得分至少是 60 分&#xff0c;则称为及格。 如果得分至少为 85 分&#xff0c;则称为优秀。 请计算及格率和优秀率&#xff0c;用百分数表示…

#WEB前端(CCS常用属性,补充span、div)

1.实验&#xff1a; 复合元素、行内元素、块内元素、行内块元素 2.IDE&#xff1a;VSCODE 3.记录&#xff1a; span为行内元素&#xff1a;不可设置宽高&#xff0c;实际占用控件决定分布空间。 div为块内元素&#xff1a;占满整行&#xff0c;可以设置宽高 img为行内块元…

Unity(第二十三部)导航

你可以使用 unity官方提供的 unity导航组件或第三方 unity导航组件&#xff0c;以实现游戏中角色或其他物体的导航。 unity导航组件通常具有多种导航模式&#xff0c;如飞行模式、步行模式、车辆模式等&#xff0c;可以根据不同的需求选择合适的模式。同时&#xff0c;unity导…

2023年全国职业院校技能大赛中职组大数据应用与服务赛项题库参考答案陆续更新中,敬请期待…

2023年全国职业院校技能大赛中职组大数据应用与服务赛项题库参考答案陆续更新中&#xff0c;敬请期待… 武汉唯众智创科技有限公司 2024 年 2 月 联系人&#xff1a;辜渝傧13037102709 题号&#xff1a;试题01 模块二&#xff1a;数据获取与处理 &#xff08;一&#xff09;…

Ainx的全局配置

&#x1f4d5;作者简介&#xff1a; 过去日记&#xff0c;致力于Java、GoLang,Rust等多种编程语言&#xff0c;热爱技术&#xff0c;喜欢游戏的博主。 &#x1f4d7;本文收录于Ainx系列&#xff0c;大家有兴趣的可以看一看 &#x1f4d8;相关专栏Rust初阶教程、go语言基础系列…

js中的闭包

理解 函数内部可以访问其外函数中的作用域 作用 创建私有变量延长变量的声明周期一般函数中的变量在函数返回之后就会被销毁,但是闭包会保存使用的变量,即便是上下文被摧毁了,使用的变量依旧存在 闭包的用途 柯里化函数的目的就是在避免重复的调用变量案例 求一个长方形的…

ROS2 Python环境变量PYTHONPATH设置

文章目录 引题解决方法方法一 将三方库与pkg放在一起方法二 将三方库放入pythonpath目录 引题 ROS2在执行ros2 pkg create --build-type ament_python **创建python包时&#xff0c;有时候会涉及外部库的导入&#xff0c;这里讲解一下如何配置PYTHONPATH变量让程序顺利找到外部…

【S32DS报错】-7-程序进入HardFault_Handler,无法正常运行

【S32K3_MCAL从入门到精通】合集&#xff1a; S32K3_MCAL从入门到精通https://blog.csdn.net/qfmzhu/category_12519033.html 问题背景&#xff1a; 在S32DS IDE中使用PEmicro&#xff08;Multilink ACP&#xff0c;Multilink Universal&#xff0c;Multilink FX&#xff09…

【网站项目】182在线作业管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

程序员职业迷宫:选择你的道路,开启技术之旅

在这个数字化飞速发展的时代&#xff0c;程序员已经成为了一个备受瞩目的职业。他们就像是现代社会中的魔法师&#xff0c;用代码搭建起一个又一个令人惊叹的数字世界。然而&#xff0c;对于许多初入行的程序员来说&#xff0c;面对前端的花园、后端的洞穴、数据科学的密室&…

【Python】进阶学习:pandas--describe()函数的使用介绍

&#x1f40d;【Python】进阶学习&#xff1a;pandas——describe()函数的使用介绍 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&am…

绘图机器 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 绘图机器的绘图笔初始位置在原点&#xff08;0, 0&#xff09;&#xff0c;机器启动后其绘图笔按下面规则绘制直线&#xff1a; 1&#xff09;尝试沿着横向坐标轴…