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

文章目录

    • 一、Split Button 概述
      • 1. 组件介绍
      • 2. 基本用法
    • 二、Split Button 的应用场景
      • 1. 提交操作
      • 2. 导出操作
      • 3. 文件操作
    • 三、Split Button 的样式定制
      • 1. 变体(Variants)
      • 2. 颜色(Colors)
    • 四、Split Button 的优势
      • 1. 提升用户体验
      • 2. 灵活性
      • 3. 视觉一致性
    • 五、注意事项
      • 1. 无障碍支持
      • 2. 交互反馈
      • 3. 布局调整
    • 六、总结

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/394345.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

信创安全 | 新一代内网安全方案—零信任沙盒

在当今数字化时代&#xff0c;访问安全和数据安全成为企业面临的重要挑战。传统的边界防御已经无法满足日益复杂的内网办公环境&#xff0c;层出不穷的攻击手段已经让市场单一的防御手段黔驴技穷。当企业面临越来越复杂的网络威胁和数据泄密风险时&#xff0c;更需要一种综合的…

数字新时代,如何守护网络空间安全?(非常详细)零基础入门到精通,收藏这一篇就够了

- 书籍推荐 - 网络空间已经成为继陆、海、空、天之后的第五疆域。随着大数据、云计算、人工智能的迅速发展&#xff0c;网络入侵、信息恶意窃取、数据篡改以及伪造攻击等行为严重影响国家安全&#xff0c;也损害公民、法人及其他组织的合法权益。毫无疑问&#xff0c;网络空间安…

华为OD-D卷多段线数据压缩

下图中&#xff0c;每个方块代表一个像素&#xff0c;每个像素用其行号和列号表示。 为简化处理&#xff0c;多段线的走向只能是水平、竖直、斜向45度。 上图中的多段线可以用下面的坐标串表示&#xff1a;(2, 8), (3, 7), (3, 6), (3, 5), (4, 4), (5, 3), (6, 2), (7, 3), (8…

Java语言程序设计基础篇_编程练习题**16.11(创建表示字母出现次数的直方图)

目录 题目&#xff1a;**16.11&#xff08;创建表示字母出现次数的直方图&#xff09; 习题思路 1.HistogramPane类 2. HistogramPaneDemo类 代码示例 结果展示 题目&#xff1a;**16.11&#xff08;创建表示字母出现次数的直方图&#xff09; 编写一个程序&#xff0c;从文件…

CAD启动时自动加载vba程序方法

启动AutoCAD时自动启动你的dvb文件&#xff0c;方法如下&#xff1a; 方法一、加载 VBA 时&#xff0c;它会在 AutoCAD安装 目录中&#xff0c;查找名为 acad.dvb 的工程删除&#xff0c;将你的dvb文件命名为acad.dvb,替换掉原始文件即可。方法二、启动 AutoCAD 时&#xff0c…

Python 异步编程:Sqlalchemy 异步实现方式

SQLAlchemy 是 Python 中最流行的数据库工具之一&#xff0c;在新版本中引入了对异步操作的支持。这为使用异步框架&#xff08;如 FastAPI&#xff09;开发应用程序带来了极大的便利。在这篇文章中&#xff0c;简单介绍下 SQLAlchemy 是如何利用 Greenlet 实现异步操作的。 什…

proteus仿真c51单片机(四)双机串口通信(电路设计及代码)

实验要求 1.通过甲机的按键给乙机发送控制字符&#xff0c;同时也可以实现乙机给甲机发送控制字符 2&#xff0e;用PROTEUS软件根据所给电路画出电路图&#xff0c;用KEIL软件调试程序和编译&#xff0c;最后在PROTEUS软件中实现仿真。 3.甲乙两个单片机通过串口进行通信&am…

第R2周:Pytorch实现:LSTM-火灾温度预测

nn.LSTM() 函数详解 nn.LSTM 是 PyTorch 中用于创建长短期记忆&#xff08;Long Short-Term Memory&#xff0c;LSTM&#xff09;模型的类。LSTM 是一种循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;的变体&#xff0c;用于处理序列数据&#…

工业设计用什么CAD软件?SolidWorks 成为您创意实现的得力助手

随着科技的发展&#xff0c;工业设计已经进入了数字化时代。对于设计师来说&#xff0c;选择一款高效、功能全面的设计软件至关重要。在市场上众多的CAD&#xff08;计算机辅助设计&#xff09;软件中&#xff0c;SolidWorks因其出色的性能和广泛的适用性而备受青睐。本文将介绍…

5.1 Python 函数的定义

欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;欢迎订阅相关专栏&#xff1a; 工&#x1f497;重&#x1f497;hao&#x1f497;&#xff1a;野老杂谈 ⭐️ 全网最全IT互联网公司面试宝典&#xff1a;收集整理全网各大IT互联网公司技术、项目、HR面试真题.…

【网络】协议与网络版计算器

协议与网络版计算器 文章目录 1.协议的概念1.1序列化与反序列化 2.网络版计算器2.1封装套接字2.2协议定制2.2.1Jsoncpp2.2.2报文处理 2.3会话层&#xff1a;TcpServer2.4应用层&#xff1a;Calculate2.5表示层&#xff1a;Service2.6应用层、表示层和会话层->应用层 1.协议…

PHP企业培训考试系统小程序源码

&#x1f680;企业培训考试系统&#xff0c;赋能员工成长新引擎&#x1f4da; &#x1f331; 开篇&#xff1a;解锁企业培训新篇章 在快速变化的商业环境中&#xff0c;员工的能力提升是企业持续发展的关键。&#x1f680; 传统的培训方式已难以满足现代企业的需求&#xff0…

获取客户端真实IP

出于安全考虑&#xff0c;近期在处理一个记录用户真实IP的需求。本来以为很简单&#xff0c;后来发现没有本来以为的简单。这里主要备忘下&#xff0c;如果服务器处于端口回流&#xff08;hairpin NAT&#xff09;,keepalived&#xff0c;nginx之后&#xff0c;如何取得客户端的…

【5G NAS】全球唯一临时标识符GUTI介绍

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G技术研究。 博客内容主要围绕…

通过python搭建文件传输服务器;支持多台电脑之间互相传输文件(支持局域网或广域网)(应该也能用于虚拟机和宿主机之间)

因为公司网络防火墙限制,所以在公司的电脑之间传输文件还是非常不方便的;所以自己搭建了一个文件传输服务器,用于多台电脑间的文件传输; 先放上最终效果: 文章目录 一、运行环境要求二、环境搭建2.1 安装python2.2 搭建虚拟环境方法1:创建Anaconda虚拟环境方法2:创建pyt…

行业大模型——详细介绍

行业垂类模型 行业垂类模型是指针对特定行业或领域而设计的人工智能模型&#xff0c;它们通过大量行业数据的训练&#xff0c;具备较高的专业性和针对性&#xff0c;能够更好地解决行业内的特定问题。以下是一个详细的构建行业垂类模型的步骤&#xff1a; 行业垂类模型的需求分…

【STM32】USART串口和I2C通信

个人主页~ USART串口和I2C通信 USART串口一、串口1、简介2、电路要求3、参数及时序 二、USART外设1、USART结构2、波特率发生器 三、数据包1、HEX数据包HEX数据包接收 2、文本数据包文本数据包接收 I2C通信一、简介二、通信协议1、硬件电路2、I2C时序基本单元 三、I2C外设1、简…

ST-LINK烧录MCU

打开ST-LINK软件&#xff1a; 主板断电状态下接入烧录器&#xff0c;烧录器USB连接电脑&#xff1a; 主板上电&#xff0c;点击连接按钮&#xff1a; 点击加载文件&#xff1a; 点击写入按钮&#xff0c;烧录成功后拔掉烧录器&#xff0c;主板重新上电

k8s使用kustomize来部署应用

k8s使用kustomize来部署应用 本文主要是讲述kustomzie的基本用法。首先&#xff0c;我们说一下部署文件的目录结构。 ./ ├── base │ ├── deployment.yaml │ ├── kustomization.yaml │ └── service.yaml └── overlays└── dev├── kustomization.…

C基础练习(学生管理系统)

1.系统运行&#xff0c;打开如下界面。列出系统帮助菜单&#xff08;即命令菜单&#xff09;&#xff0c;提示输入命令 2.开始时还没有录入成绩&#xff0c;所以输入命令 L 也无法列出成绩。应提示“成绩表为空&#xff01;请先使用命令 T 录入学生成绩。” 同理&#xff0c;当…