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…

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

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

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

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

【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…

【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;尝试沿着横向坐标轴…

支持向量机 SVM | 线性可分:硬间隔模型公式推导

目录 一. SVM的优越性二. SVM算法推导小节概念 在开始讲述SVM算法之前&#xff0c;我们先来看一段定义&#xff1a; 支持向量机(Support VecorMachine, SVM)本身是一个二元分类算法&#xff0c;支持线性分类和非线性分类的分类应用&#xff0c;同时通过OvR或者OvO的方式可以应用…

长贵对赵本山说:你需要我们家大脚,我立马给你配双大鞋!

长贵对赵本山说&#xff1a;你需要我们家大脚&#xff0c;我立马给你配双大鞋&#xff01; --小品《乡村爱情》&#xff08;中2&#xff09;的台词 表演者&#xff1a;赵本山 于月仙 王小利 唐鉴军等 &#xff08;接上&#xff09; 哈哈哈 伊拉克啊 这地方也不产这玩意吧 …

Chat GPT:AI聊天机器人的革命性突破!

一、引言 近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术的发展日新月异&#xff0c;其中最具代表性的成果之一便是Chat GPT。这款基于自然语言处理&#xff08;NLP&#xff09;技术的聊天机器人&#xff0c;以其高度智能、灵活多变的特点&#xff0c;迅速吸引了全…

笔记74:在SLAM建图过程中,为什么要使用【障碍物点云配准算法】和【里程计估算算法】结合的方法

仅使用【障碍物点云配准算法】&#xff0c;很容易导致在一条长通道中&#xff0c;因为前后两帧的雷达点云图过于相似&#xff0c;导致特征匹配一直完全重合&#xff0c;使得机器人建图一直停留在原地&#xff0c;但实体机器人早就沿着通道跑向远端了&#xff1b; 使用Hector_ma…

(学习日记)2024.03.02:UCOSIII第四节:创建任务

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

这是开玩笑吗?加个工具,WPS与Excel表格变成了应用系统

表格处理数据简单快捷&#xff0c;是个人用户的首选。然而&#xff0c;当企业长期使用&#xff0c;成本表、客户表、销售表等堆积如山&#xff0c;寻找所需表格如同大海捞针&#xff0c;稍有不慎便可能导致数据丢失、混乱。即便使用WPS和Excel这样的表格软件&#xff0c;处理大…

回溯难题(算法村第十八关黄金挑战)

复原 IP 地址 93. 复原 IP 地址 - 力扣&#xff08;LeetCode&#xff09; 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 . 分隔。 例如&#xff1a;"0.1.2.201" 和 &q…