【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><ButtonGroupvariant="contained"ref={anchorRef}aria-label="Button group with a nested menu"><Button onClick={handleClick}>{options[selectedIndex]}</Button><Buttonsize="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><Poppersx={{zIndex: 1,}}open={open}anchorEl={anchorRef.current}role={undefined}transitiondisablePortal>{({ 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) => (<MenuItemkey={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><Buttonsize="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><Buttonsize="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><Buttonsize="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><Buttonsize="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><Buttonsize="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

---