当前位置: 首页 > news >正文

Material UI 5 学习02-其它按钮组件

Material UI 5 学习02-其它按钮组件

  • 一、IconButton按钮
  • 二、 ButtonGroup按钮组
    • 1、最基本的实例
    • 2、垂直按钮组

一、IconButton按钮

图标按钮通常适用于切换按钮,允许选择或选择单个选项 取消选择,例如在项目中添加或删除星号。

                <IconButton aria-label="delete"><DeleteIcon /></IconButton><IconButton aria-label="delete" disabled  color="primary"><DeleteIcon /></IconButton><IconButton color="secondary" aria-label="add an alarm"><AlarmAdd /></IconButton><IconButton color="primary" aria-label="add to shopping cart"><AddShoppingCart /></IconButton>

在这里插入图片描述
经过自己的测试,发现Button按钮的一些属性,在IconButton中没有,或者是不起作用的。
IconButton也是没有任何背景颜色的,也没有边框的。
下面比较Button和IconButton的异同。

ButtonIconButton
variant属性存在不存在
disabled属性存在存在
href属性存在存在
disableElevation属性存在不存在
onClick存在存在
color存在存在
size存在存在,但没有效果
startIcon存在不存在
endIcon存在不存在

二、 ButtonGroup按钮组

学习了基本的按钮,我们可以学习按钮组这个组件ButtonGroup

1、最基本的实例

在这里插入图片描述

       <ButtonGroup variant="contained"><Button>按钮一</Button><Button>按钮二</Button><Button>按钮三</Button></ButtonGroup>

2、垂直按钮组

1、variant属性是可以用在ButtonGroup 上面的
2、color和size同样也可以使用在ButtonGroup 上面
3、默认的按钮组是水平排列的
4、如果要垂直排列,则加上属性orientation=“vertical” 即垂直排列即可。
下面的代码来自官网。

import {Box, Button, ButtonGroup} from "@mui/material";const buttons = [<Button key="one">One</Button>,<Button key="two">Two</Button>,<Button key="three">Three</Button>,
];
function App() {return (<Box sx={{display: 'flex', '& > *': {m: 1}}}><ButtonGroup orientation="vertical" aria-label="Vertical button group">{buttons}</ButtonGroup><ButtonGrouporientation="vertical"aria-label="Vertical button group"variant="contained">{buttons}</ButtonGroup><ButtonGrouporientation="vertical"aria-label="Vertical button group"variant="text">{buttons}</ButtonGroup></Box>);
}
export default App;

在这里插入图片描述
我来解释一下上面的代码含义。

1、Box是一个组件,类似于div,是一个布局组件。
2、display:flex则说明弹性布局。
3、‘& > *’: {m: 1}这段代码的含义是:& > * 在 Sass/SCSS 中表示选择当前选择器的所有直接子元素。在这里,是 Material-UI组件的直接子元素。也就是所有的ButrtonGroup按钮。m:1就是设置外边距为1。

下面是一个例子:

import React from 'react';  
import { makeStyles } from '@material-ui/core/styles';  
import List from '@material-ui/core/List';  
import ListItem from '@material-ui/core/ListItem';  const useStyles = makeStyles({  list: {  display: 'flex',  '& > *': {  m: 1, // 设置所有直接子元素的外边距  },  },  
});  export default function MyComponent() {  const classes = useStyles();  return (  <List className={classes.list}>  <ListItem>Item 1</ListItem>  <ListItem>Item 2</ListItem>  <ListItem>Item 3</ListItem>  </List>  );  
}

在这个例子中,List 组件被设置为了弹性容器,而它的所有直接子元素(ListItem)都将获得由 m: 1 定义的外边距。这个外边距的具体值取决于主题中 spacing 的配置。

http://www.lryc.cn/news/313737.html

相关文章:

  • Express学习(三)
  • influxdb2.0插入数据字段类型出现冲突问题解决
  • [C++]类和对象,explicit,static,友元,构造函数——喵喵要吃C嘎嘎4
  • 物联网的商业模式洞察
  • 智能指针基础知识【C++】【RAII思想 || unique_ptr || shared_ptrweak_ptr || 循环引用问题】
  • leetcode:反转链表II 和k个一组反转链表的C++实现
  • ERD Online 快速启动指南:代码下载到首次运行的全流程攻略 ️
  • c++ 11 新特性 不同数据类型之间转换函数之const_cast
  • C++从零开始的打怪升级之路(day45)
  • 小鹅通前端实习一面
  • ArrayList常用API
  • Chrome安装Axure插件
  • 【AI+应用】模仿爆款视频二次创作短视频操作步骤
  • HTML使用
  • 通过联合部署DDoS高防和WAF提升网站防护能力
  • 具体挫折现象的发生以及解法思考:您如果继续不问的话,严重重责就容易来
  • Type-C接口PD协议统一:引领电子科技新纪元的优势解析
  • 探讨2024年AI辅助研发的趋势
  • Java对接海康威视摄像头实现抓图
  • 浏览器一键重新发起请求
  • 一起来读李清照
  • 找出单身狗1,2
  • 贝叶斯优化BiLSTM分类预测(matlab代码)
  • Linux运维:实现光盘开机自动挂载、配置本地yum源教程
  • C语言从入门到精通 第十二章(程序的编译及链接)
  • 即插即用篇 | YOLOv8 引入 ParNetAttention 注意力机制 | 《NON-DEEP NETWORKS》
  • 基于51单片机的数字频率计设计
  • 20240307-1-前端开发校招面试问题整理JavaScript
  • 1.3 数据库系统的结构
  • 【Springer出版 · EI检索】| 第二届先进无人飞行系统国际会议(ICAUAS 2024)