【Material-UI】按钮组：Split Button 详解

Material-UI 是一个非常流行的 React UI 框架，提供了丰富的组件来提升开发效率和用户体验。本文将详细介绍 Material-UI 中的 ButtonGroup 组件的 Split Button 功能。Split Button 可以通过下拉菜单改变按钮的操作，或用于立即触发相关操作。

一、Split Button 概述

1. 组件介绍

Split Button 是一种组合按钮，它由一个主按钮和一个下拉菜单按钮组成。主按钮用于执行默认操作，而下拉菜单按钮用于选择其他操作。这样，用户可以快速执行常用操作，同时也可以轻松访问其他选项。

2. 基本用法

以下是一个简单的示例，展示了如何使用 ButtonGroup 组件创建一个 Split Button：

import * as React from 'react';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import Grow from '@mui/material/Grow';
import Paper from '@mui/material/Paper';
import Popper from '@mui/material/Popper';
import MenuItem from '@mui/material/MenuItem';
import MenuList from '@mui/material/MenuList';

const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge'];

export default function SplitButton() {
  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleClick = () => {
    console.info(`You clicked ${options[selectedIndex]}`);
  };

  const handleMenuItemClick = (event, index) => {
    setSelectedIndex(index);
    setOpen(false);
  };

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
  };

  return (
    <React.Fragment>
      <ButtonGroup
        variant="contained"
        ref={anchorRef}
        aria-label="Button group with a nested menu"
      >
        <Button onClick={handleClick}>{options[selectedIndex]}</Button>
        <Button
          size="small"
          aria-controls={open ? 'split-button-menu' : undefined}
          aria-expanded={open ? 'true' : undefined}
          aria-label="select merge strategy"
          aria-haspopup="menu"
          onClick={handleToggle}
        >
          <ArrowDropDownIcon />
        </Button>
      </ButtonGroup>
      <Popper
        sx={{
          zIndex: 1,
        }}
        open={open}
        anchorEl={anchorRef.current}
        role={undefined}
        transition
        disablePortal
      >
        {({ TransitionProps, placement }) => (
          <Grow
            {...TransitionProps}
            style={{
              transformOrigin:
                placement === 'bottom' ? 'center top' : 'center bottom',
            }}
          >
            <Paper>
              <ClickAwayListener onClickAway={handleClose}>
                <MenuList id="split-button-menu" autoFocusItem>
                  {options.map((option, index) => (
                    <MenuItem
                      key={option}
                      disabled={index === 2}
                      selected={index === selectedIndex}
                      onClick={(event) => handleMenuItemClick(event, index)}
                    >
                      {option}
                    </MenuItem>
                  ))}
                </MenuList>
              </ClickAwayListener>
            </Paper>
          </Grow>
        )}
      </Popper>
    </React.Fragment>
  );
}

在上述代码中，我们创建了一个 Split Button 组件，其中包括一个主要按钮和一个下拉菜单按钮。用户可以点击主按钮执行默认操作，或者点击下拉菜单按钮选择其他操作。

二、Split Button 的应用场景

1. 提交操作

在版本控制系统中，Split Button 可以用于选择不同的提交方式，如合并提交、压缩提交或变基提交。

<ButtonGroup variant="contained" ref={anchorRef} aria-label="Split button for commit actions">
  <Button onClick={handleClick}>{options[selectedIndex]}</Button>
  <Button
    size="small"
    aria-controls={open ? 'split-button-menu' : undefined}
    aria-expanded={open ? 'true' : undefined}
    aria-label="select commit strategy"
    aria-haspopup="menu"
    onClick={handleToggle}
  >
    <ArrowDropDownIcon />
  </Button>
</ButtonGroup>

2. 导出操作

在数据导出功能中，Split Button 可以让用户选择不同的导出格式，如 CSV、Excel 或 PDF。

<ButtonGroup variant="contained" ref={anchorRef} aria-label="Split button for export actions">
  <Button onClick={handleClick}>{options[selectedIndex]}</Button>
  <Button
    size="small"
    aria-controls={open ? 'split-button-menu' : undefined}
    aria-expanded={open ? 'true' : undefined}
    aria-label="select export format"
    aria-haspopup="menu"
    onClick={handleToggle}
  >
    <ArrowDropDownIcon />
  </Button>
</ButtonGroup>

3. 文件操作

在文件管理系统中，Split Button 可以用于选择不同的文件操作，如打开、重命名或删除。

<ButtonGroup variant="contained" ref={anchorRef} aria-label="Split button for file actions">
  <Button onClick={handleClick}>{options[selectedIndex]}</Button>
  <Button
    size="small"
    aria-controls={open ? 'split-button-menu' : undefined}
    aria-expanded={open ? 'true' : undefined}
    aria-label="select file action"
    aria-haspopup="menu"
    onClick={handleToggle}
  >
    <ArrowDropDownIcon />
  </Button>
</ButtonGroup>

三、Split Button 的样式定制

1. 变体（Variants）

ButtonGroup 组件支持多种按钮样式变体，包括 "text"、"outlined" 和 "contained"。这些变体决定了按钮的外观，如是否有边框、填充背景色等。

• Text：无边框和背景色的按钮，适用于低优先级操作。
• Outlined：带边框但无填充背景的按钮，适用于次要操作。
• Contained：填充背景的按钮，适用于主要操作。

<ButtonGroup variant="outlined" ref={anchorRef} aria-label="Outlined split button">
  <Button onClick={handleClick}>{options[selectedIndex]}</Button>
  <Button
    size="small"
    aria-controls={open ? 'split-button-menu' : undefined}
    aria-expanded={open ? 'true' : undefined}
    aria-label="select action"
    aria-haspopup="menu"
    onClick={handleToggle}
  >
    <ArrowDropDownIcon />
  </Button>
</ButtonGroup>

2. 颜色（Colors）

ButtonGroup 组件支持多种颜色选择，包括 "primary"、"secondary"、"default" 等。可以根据主题或设计需求选择合适的颜色。

<ButtonGroup color="secondary" variant="contained" ref={anchorRef} aria-label="Secondary color split button">
  <Button onClick={handleClick}>{options[selectedIndex]}</Button>
  <Button
    size="small"
    aria-controls={open ? 'split-button-menu' : undefined}
    aria-expanded={open ? 'true' : undefined}
    aria-label="select action"
    aria-haspopup="menu"
    onClick={handleToggle}
  >
    <ArrowDropDownIcon />
  </Button>
</ButtonGroup>

四、Split Button 的优势

1. 提升用户体验

Split Button 能够将常用操作和其他选项集中在一个按钮组中，提升用户的操作效率，减少界面复杂度。

2. 灵活性

用户可以通过下拉菜单轻松选择不同的操作，而不需要在界面上显示多个按钮，占用额外的空间。

3. 视觉一致性

通过使用 ButtonGroup 组件，可以确保所有按钮具有一致的样式和行为，提升界面的整体美观性。

五、注意事项

1. 无障碍支持

在使用 ButtonGroup 时，应为每个按钮提供合适的 aria-label 属性，以确保使用屏幕阅读器的用户能够顺利使用。

2. 交互反馈

确保按钮组在不同的状态下（如悬停、点击）提供足够的交互反馈，以提升用户体验。

3. 布局调整

根据界面布局和用户需求，可以使用 sx 属性或自定义样式调整按钮组的间距、对齐方式等，确保按钮组在各个设备和分辨率下的良好表现。

六、总结

Material-UI 的 ButtonGroup 组件通过支持 Split Button，为开发者提供了更灵活的操作选项。Split Button 在提交操作、导出操作和文件操作等场景中具有广泛的应用。通过合理设置按钮组的变体和颜色，可以提升界面的视觉一致性和用户体验。希望本文能帮助你更好地理解和使用 Material-UI 的 Split Button 组件。

推荐：

• JavaScript
• react
• vue

---