当前位置: 首页 > news >正文

【Material-UI】复杂按钮 (Complex Button) 自定义详解

文章目录

    • 一、ButtonBase 组件简介
    • 二、实例讲解:创建复杂的图片按钮
      • 1. 样式定义
      • 2. 核心组件构建
      • 3. 交互效果
    • 三、高级自定义技巧
      • 1. 响应式设计
      • 2. 动态内容与动画
    • 四、总结

在现代 Web 应用中,按钮不仅仅是一个点击交互元素,它们也承载着传递信息和引导用户操作的功能。Material-UI 提供了丰富的按钮组件,但有时我们需要更复杂、更具个性化的按钮。这时,Material-UI 的 ButtonBase 组件就派上用场了。本文将深入探讨如何使用 ButtonBase 构建复杂按钮,以及实现自定义交互效果的方法。

一、ButtonBase 组件简介

Material-UI 的 Text Buttons、Contained Buttons、Floating Action Buttons 和 Icon Buttons 等常见按钮,都是基于同一个底层组件——ButtonBase 构建的。ButtonBase 是一个较低级的基础组件,提供了按钮的核心交互逻辑,如点击、焦点、悬停等。我们可以利用 ButtonBase 来创建自定义的按钮风格和交互效果。

二、实例讲解:创建复杂的图片按钮

下面我们通过一个实例展示如何使用 ButtonBase 创建一个复杂的图片按钮集合。

1. 样式定义

我们首先定义了一些必要的样式,包括按钮的背景图像、遮罩效果、标题文本等。

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import ButtonBase from '@mui/material/ButtonBase';
import Typography from '@mui/material/Typography';const images = [{url: '/static/images/buttons/breakfast.jpg',title: 'Breakfast',width: '40%',},{url: '/static/images/buttons/burgers.jpg',title: 'Burgers',width: '30%',},{url: '/static/images/buttons/camera.jpg',title: 'Camera',width: '30%',},
];const ImageButton = styled(ButtonBase)(({ theme }) => ({position: 'relative',height: 200,[theme.breakpoints.down('sm')]: {width: '100% !important',height: 100,},'&:hover, &.Mui-focusVisible': {zIndex: 1,'& .MuiImageBackdrop-root': {opacity: 0.15,},'& .MuiImageMarked-root': {opacity: 0,},'& .MuiTypography-root': {border: '4px solid currentColor',},},
}));const ImageSrc = styled('span')({position: 'absolute',left: 0,right: 0,top: 0,bottom: 0,backgroundSize: 'cover',backgroundPosition: 'center 40%',
});const Image = styled('span')(({ theme }) => ({position: 'absolute',left: 0,right: 0,top: 0,bottom: 0,display: 'flex',alignItems: 'center',justifyContent: 'center',color: theme.palette.common.white,
}));const ImageBackdrop = styled('span')(({ theme }) => ({position: 'absolute',left: 0,right: 0,top: 0,bottom: 0,backgroundColor: theme.palette.common.black,opacity: 0.4,transition: theme.transitions.create('opacity'),
}));const ImageMarked = styled('span')(({ theme }) => ({height: 3,width: 18,backgroundColor: theme.palette.common.white,position: 'absolute',bottom: -2,left: 'calc(50% - 9px)',transition: theme.transitions.create('opacity'),
}));

2. 核心组件构建

接下来,我们使用这些样式来构建按钮组件。在这里,我们使用 Box 组件来布局按钮,并通过 map 方法遍历图片数组,动态生成每个图片按钮。

export default function ButtonBaseDemo() {return (<Box sx={{ display: 'flex', flexWrap: 'wrap', minWidth: 300, width: '100%' }}>{images.map((image) => (<ImageButtonfocusRipplekey={image.title}style={{width: image.width,}}><ImageSrc style={{ backgroundImage: `url(${image.url})` }} /><ImageBackdrop className="MuiImageBackdrop-root" /><Image><Typographycomponent="span"variant="subtitle1"color="inherit"sx={{position: 'relative',p: 4,pt: 2,pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,}}>{image.title}<ImageMarked className="MuiImageMarked-root" /></Typography></Image></ImageButton>))}</Box>);
}

3. 交互效果

通过 ImageButton 的样式定义,我们实现了一些交互效果:

  • 悬停效果:当用户悬停在按钮上时,按钮的 z-index 提高,同时背景变暗,标题下方的标记线消失,标题文本的边框变得明显。
  • 焦点效果:与悬停效果类似,当按钮获得焦点时(如通过键盘导航),按钮的外观也会改变,增强可访问性。

三、高级自定义技巧

1. 响应式设计

在样式定义中,我们使用了媒体查询 ([theme.breakpoints.down('sm')]) 来处理不同屏幕尺寸下的布局变化。例如,当屏幕宽度小于 sm 时,按钮的宽度调整为 100%,高度减少到 100px。这确保了在移动设备上有良好的用户体验。

2. 动态内容与动画

可以进一步增强按钮的视觉效果,例如添加淡入淡出动画、动态加载内容等。使用 Material-UI 的 transitionkeyframes API,可以实现更复杂的动画效果。

const fadeIn = keyframes`from {opacity: 0;}to {opacity: 1;}
`;const AnimatedTypography = styled(Typography)(({ theme }) => ({animation: `${fadeIn} 1s ease-in-out`,
}));

四、总结

Material-UI 的 ButtonBase 组件为创建复杂的按钮提供了极大的灵活性。通过合理使用样式和组件,我们可以轻松地实现各种定制化的按钮设计,以适应不同的应用场景和用户需求。本文介绍的自定义图片按钮示例,展示了如何通过 ButtonBase 构建高级的视觉效果和交互体验。

在实际开发中,我们还可以结合 Material-UI 的主题系统、响应式设计和动画效果,进一步提升应用的整体体验。希望这篇文章能帮助您更好地理解和利用 ButtonBase 组件,打造更加精美和独特的 Web 应用界面。

推荐:

  • JavaScript
  • react
  • vue

在这里插入图片描述

相关文章:

【Material-UI】复杂按钮 (Complex Button) 自定义详解

文章目录 一、ButtonBase 组件简介二、实例讲解&#xff1a;创建复杂的图片按钮1. 样式定义2. 核心组件构建3. 交互效果 三、高级自定义技巧1. 响应式设计2. 动态内容与动画 四、总结 在现代 Web 应用中&#xff0c;按钮不仅仅是一个点击交互元素&#xff0c;它们也承载着传递信…...

IT服务质量管理攻略(至简)

质量管理、风险管理和信息安全管理是IT服务监督管理的重要内容&#xff0c;三者之间相对独立。IT服务质量管理是通过制订质量方针、质量目标和质量计划&#xff0c;实施质量控制、质量保证和质量改进活动&#xff0c;确保IT服务满足服务级别协议的要求&#xff0c;最终获得用户…...

MySQL事务隔离级别、InnoDB使用MVCC+各种锁实现了RC和RR事务隔离级别、具体案例

事务隔离级别 脏读&#xff1a;一个事务读取到另一个未提交事务的更改。不可重复读&#xff1a;一个事务在两次读取同一数据时&#xff0c;发现数据被另一个已提交事务修改了。幻读&#xff1a;一个事务在读取过程中&#xff0c;因其他事务的插入而导致返回的行数不一致&#…...

你的Java项目还在等待吗?快来学会线程池,解放你的性能!

文章目录 你的Java项目还在等待吗&#xff1f;快来学会线程池&#xff0c;解放你的性能&#xff01;1 什么是线程池&#xff1f;为什么需要它&#xff1f;2 线程池的参数有哪些&#xff1f;3 不同类型的线程池有哪些配置&#xff1f; 你的Java项目还在等待吗&#xff1f;快来学…...

深入解析:Amazon Bedrock 上 Claude 3 Haiku 的微调测试报告

前言 2024年7月10日&#xff0c;Anthropic Claude 3 Haiku 的微调功能在 Amazon Bedrock 上开放预览。本篇文章将分享 Claude 3 Haiku 的微调使用步骤及微调后模型的评估结果。 LLM 细调的优势 通过细调&#xff0c;LLM可以获得特定领域的知识或新知识。这样&#xff0c;与RA…...

2023年庐阳区青少年信息学科普日真题- 马拉松(marathon)

题目描述 环湖马拉松全程 L 公里&#xff0c;已经安排了 N 个补给点&#xff0c;位置已经确定。由于预算增加&#xff0c;现在可以增设 K 个补给点。如何安排新增的补给点使得相邻补给点间最大距离最小。相邻补给点间距离也包括起点与第一个补给点之间的距离和最后一个补给点与…...

Python笔记:socket.gaierror: [Errno -3] Temporary failure in name resolution

【Python】成功解决socket.gaierror: [Errno -3] Temporary failure in name resolution 在Python开发中&#xff0c;使用网络编程时&#xff0c;特别是处理socket连接时&#xff0c;遇到socket.gaierror: [Errno -3] Temporary failure in name resolution这个错误是一个相对…...

HexView 刷写文件脚本处理工具-基本功能介绍(三)-导出S19/HEX

菜单 导出(Export) 此项目将一系列不同的选项组合在一起,用于将内部数据存储为不同的文件格式。每种导出都可以包含一些选项,以调整输出信息。 导出为S-Record格式(Export as S-Record) Motorola S-Record格式导出数据。 记录类型将根据最高地址信息的长度自动选择。…...

代码随想录算法训练营第四天(二)|面试题 02.07. 链表相交 142.环形链表II

面试题 02.07. 链表相交 题目&#xff1a; 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环…...

学习记录第二十一天

目录操作是指在计算机文件系统中对目录&#xff08;也称为文件夹&#xff09;进行的各种管理操作。目录是组织和存储文件的一种逻辑结构&#xff0c;它帮助用户和系统管理大量文件&#xff0c;使得文件查找和组织更加高效有序。目录操作主要包括以下几种&#xff1a; 1.创建目…...

江协科技51单片机学习- p31 LCD1602液晶屏驱动

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…...

Android SurfaceFlinger——渲染完成帧显示(四十八)

帧渲染完成后下一步就是将帧缓冲区(framebuffer)的内容发送到显示设备进行显示,也是 SurfaceFlinger 处理渲染合成的最后一步。 1.更新输出设备的色彩配置文件2.更新与合成相关的状态3.计划合成帧图层4.写入合成状态5.设置颜色矩阵6.开始帧7.准备帧数据以进行显示(异步方式)…...

ABAP+json格式数据转换时参数为空没传值

CALL METHOD /UI2/CL_JSON>SERIALIZE 我们在ABAP传输json格式数据到外围系统时&#xff0c;会用到这个类方法 /UI2/CL_JSON>SERIALIZE CALL METHOD /UI2/CL_JSON>SERIALIZEEXPORTINGDATA LO_DATACOMPRESS XPRETTY_NAME /UI2/CL_JSON>PRETTY_M…...

Flink中上游DataStream到下游DataStream的内置分区策略及自定义分区策略

目录 全局分区器GlobalPartitioner 广播分区器BroadcastPartitioner 哈希分区器BinaryHashPartitioner 轮询分区器RebalancePartitioner 重缩放分区器RescalePartitioner 随机分区器ShufflePartitioner 转发分区器ForwardPartitioner 键组分区器KeyGroupStreamPartitio…...

谁来做引领企业精益变革的舵手最合适?

在这个瞬息万变的商业时代&#xff0c;企业如同航行在波涛汹涌的大海中的巨轮&#xff0c;既需面对未知的挑战&#xff0c;也要抓住稍纵即逝的机遇。而在这场没有终点的航行中&#xff0c;引领企业实现精益变革的舵手&#xff0c;无疑是推动企业破浪前行、稳健致远的关键角色。…...

数据结构(java实现)——优先级队列,堆

文章目录 优先级队列堆堆的概念堆的模拟实现创建堆入堆判满删除判空获取栈顶元素 创建堆两种方式的时间复杂度堆排序java提供的PriorityQueue类基本的属性关于PriorityQueue类的三个构造方法关于PriorityQueue类中&#xff0c;入堆方法是怎样实现的&#xff1f;PriorityQueue注…...

一部分优化算法

一、优化问题 1、优化目标 &#xff08;1&#xff09;优化和深度学习的目标是根本不同的。前者主要关注的是最小化目标&#xff0c;后者则关注在给定有限数据量的情况下寻找合适的模型。 &#xff08;2&#xff09;优化算法的目标函数通常是基于训练数据集的损失函数&#x…...

图论(强联通分量)

在图论中&#xff0c;特别是在讨论有向图&#xff08;Directed Graph&#xff09;时&#xff0c;我们常常需要了解图的结构特性&#xff0c;比如强联通分量&#xff08;Strongly Connected Components, SCC&#xff09;。了解强联通分量中的各种边对于理解图的整体结构以及某些…...

LLaMA- Adapter V2: Parameter-Efficient Visual Instruction Model

发表时间&#xff1a;28 Apr 2023 论文链接&#xff1a;https://arxiv.org/pdf/2304.15010 作者单位&#xff1a; Shanghai Artificial Intelligence Laboratory Motivation&#xff1a;如何有效地将大型语言模型 (LLM) 转换为指令追随者最近是一个流行的研究方向&#xff0…...

【爬虫实战】利用代理爬取Temu电商数据

引言 在行业竞争激烈、市场变化快速的跨境电商领域&#xff0c;数据采集可以帮助企业深入了解客户需求和行为&#xff0c;分析市场趋势和竞争情况&#xff0c;从而优化产品和服务&#xff0c;提高客户满意度和忠诚度。同时&#xff0c;数据采集可以实时跟踪库存水平和销售情况&…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...