Material UI 是一个广泛使用的 React 组件库，它提供了一系列可复用的组件来帮助开发者构建美观且一致的用户界面。在这篇文章中，我们将详细探讨 Material UI 的按钮组（Button Group）组件，包括其属性、方法，以及如何结合其他组件进行使用。

什么是按钮组（Button Group）？

按钮组是指一组按钮的集合，它们通常用于执行相关的操作。例如，用户可以选择多个选项或在多种操作之间进行切换。按钮组能够增强用户体验，使界面更加清晰和易于操作。

1. 安装 Material UI

如果您还没有安装 Material UI，请使用以下命令进行安装：

npm install @mui/material @emotion/react @emotion/styled

2. 创建按钮组

下面是一个简单的按钮组示例，展示了如何使用 ButtonGroup 组件：

import React from 'react';
import { Button, ButtonGroup } from '@mui/material';

function ButtonGroupExample() {
    return (
        <ButtonGroup variant="contained" aria-label="outlined primary button group">
            <Button color="primary">左边</Button>
            <Button color="primary">中间</Button>
            <Button color="primary">右边</Button>
        </ButtonGroup>
    );
}

export default ButtonGroupExample;

代码解析

• ButtonGroup: 包含按钮的容器。variant 属性指定按钮的样式（如 contained、outlined 或 text）。
• Button: 单个按钮，可以设置颜色、尺寸等属性。

3. ButtonGroup 属性

3.1 常用属性

• variant: 指定按钮的样式（contained、outlined、text）。
• color: 按钮的颜色（如 default、inherit、primary、secondary）。
• size: 设置按钮的大小（small、medium、large）。
• orientation: 设置按钮组的方向（horizontal 或 vertical）。
• disableElevation: 如果为 true，则按钮将没有阴影效果。

3.2 示例：不同样式和方向的按钮组

import React from 'react';
import { Button, ButtonGroup } from '@mui/material';

function ExtendedButtonGroup() {
    return (
        <div>
            <h3>水平按钮组</h3>
            <ButtonGroup variant="contained" color="primary">
                <Button>按钮 1</Button>
                <Button>按钮 2</Button>
                <Button>按钮 3</Button>
            </ButtonGroup>

            <h3>垂直按钮组</h3>
            <ButtonGroup variant="outlined" orientation="vertical" color="secondary">
                <Button>按钮 A</Button>
                <Button>按钮 B</Button>
                <Button>按钮 C</Button>
            </ButtonGroup>
        </div>
    );
}

export default ExtendedButtonGroup;

代码解析

• 该示例展示了两种不同方向的按钮组，分别是水平和垂直布局。
• 通过设置 variant 和 color 属性，我们可以快速改变按钮的样式。

4. 与其他组件结合使用

4.1 使用对话框（Dialog）

按钮组常与对话框组件结合使用，以提供选项或确认操作。以下是一个与对话框结合的示例：

import React, { useState } from 'react';
import { Button, ButtonGroup, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';

function DialogButtonGroupExample() {
    const [open, setOpen] = useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
            <Button variant="outlined" onClick={handleClickOpen}>
                打开对话框
            </Button>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>选择一个选项</DialogTitle>
                <DialogContent>
                    <ButtonGroup variant="contained" color="primary">
                        <Button onClick={handleClose}>选项 1</Button>
                        <Button onClick={handleClose}>选项 2</Button>
                        <Button onClick={handleClose}>选项 3</Button>
                    </ButtonGroup>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose}>关闭</Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

export default DialogButtonGroupExample;

代码解析

• 使用 Dialog 组件创建一个弹出对话框，包含按钮组供用户选择。
• handleClickOpen 和 handleClose 函数用于控制对话框的开关。

5. 综合示例：表单中的按钮组

按钮组在表单中也非常有用，以下是一个结合了输入框和按钮组的示例：

import React, { useState } from 'react';
import { Button, ButtonGroup, TextField, Box } from '@mui/material';

function FormWithButtonGroup() {
    const [inputValue, setInputValue] = useState('');

    const handleInputChange = (event) => {
        setInputValue(event.target.value);
    };

    const handleSubmit = (action) => {
        console.log(`提交: ${inputValue}，操作: ${action}`);
        // 处理提交逻辑
    };

    return (
        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 2 }}>
            <TextField
                label="输入内容"
                variant="outlined"
                value={inputValue}
                onChange={handleInputChange}
                sx={{ marginBottom: 2 }}
            />
            <ButtonGroup variant="contained">
                <Button onClick={() => handleSubmit('保存')}>保存</Button>
                <Button onClick={() => handleSubmit('取消')}>取消</Button>
            </ButtonGroup>
        </Box>
    );
}

export default FormWithButtonGroup;

代码解析

• 使用 TextField 收集用户输入，同时提供按钮组进行操作选择。
• handleSubmit 函数用于处理按钮点击事件。

6. 小结

在本篇文章中，我们详细探讨了 Material UI 的按钮组（Button Group）组件的使用，包括如何配置其属性、与其他组件结合使用的示例等。通过这些示例，您可以看到按钮组在不同场景中的灵活性和易用性。

通过 Material UI，开发者可以快速构建现代化的用户界面，同时确保良好的用户体验。如果您对其他 Material UI 组件有兴趣，欢迎随时询问！