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

一、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>

1
2
3
4
5
6
7
8
9
10
11
12
13

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

二、 ButtonGroup按钮组

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

1、最基本的实例

       <ButtonGroup variant="contained">
           <Button>按钮一</Button>
           <Button>按钮二</Button>
           <Button>按钮三</Button>
       </ButtonGroup>
1
2
3
4
5

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>
            <ButtonGroup
                orientation="vertical"
                aria-label="Vertical button group"
                variant="contained"
            >
                {buttons}
            </ButtonGroup>
            <ButtonGroup
                orientation="vertical"
                aria-label="Vertical button group"
                variant="text"
            >
                {buttons}
            </ButtonGroup>
        </Box>

    );
}
export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

我来解释一下上面的代码含义。

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>  
  );  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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