数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 Material UI 中创建复杂的按钮？
在 Web 应用程序中，按钮对于启用用户参与至关重要。有时我们需要使用其应用程序或网站为用户提供自定义交互。除了 Material UI 提供的具有标准功能的简单按钮外，您还可以创建具有尖端功能、独特样式和交互行为的复杂按钮。为了在按钮中提供自定义交互，我们可以使用 Material UI 中提供的非常酷的 API，即 ButtonBase 组件 API。
在本文中，我们将学习如何在 Material UI 中创建复杂的按钮。在深入研究本文之前，我们需要创建一个 React 项目并将 Material UI 安装到其中。因此，让我们开始并了解创建复杂按钮的完整过程。
创建复杂按钮的步骤
以下是使用 React 在 Material UI 中创建复杂按钮的完整步骤：
步骤 1：创建一个新的 React 应用并安装 MUI
首先，我们必须拥有一个安装了 Material UI 的 React 应用。让我们通过运行以下命令创建一个新的 React 应用并安装 Mui：
npx create-react-app myproject cd myproject npm install @mui/material @emotion/react @emotion/styled
步骤 2：定义一个 React 组件
现在，当创建新的 React 应用后，在 src 文件夹中有一个主要的 App.js 文件。打开它，并添加以下代码：
import React from "react";
export default function App() {
return (
…
)
}
步骤 3：导入 ButtonBase 组件
一旦我们定义了新的组件，就该导入 ButtonBase 组件了。ButtonBase 组件非常重要，因为 Material UI 中的所有按钮组件都是基于此组件构建的。以下是导入按钮组的语法：
import ButtonBase from "@mui/material/ButtonBase";
步骤 4：使用 ButtonBase 组件
现在，以下是我们如何在使用 Material UI 的 React 中使用 ButtonBase 组件的方法。在此代码中，样式尚未应用。稍后，我们将探讨一些使用自定义样式创建复杂自定义按钮的示例。
<ButtonBase> … </ButtonBase>
API
<ButtonBase> - ButtonBase API 用于开发自定义按钮，因为它为我们提供了创建新的修改后的按钮的构建块。该组件包含大量的样式重置以及构建按钮的逻辑。
属性
action - 此属性仅与 focusVisible action 一起用于强制性操作。
centerRipple - 当为 true 时，此属性用于居中涟漪效果。
children - 此属性确定组件的内容。
classes - 此属性用于提供自定义类，可用于覆盖样式。
component - 此属性用于创建一个新组件作为根节点。
disabled - 此属性用于禁用组件。
disabledRipple - 此属性用于禁用涟漪效果。
focusRipple - 当为 true 时，此属性用于在基本按钮中聚焦键盘涟漪效果。
LinkComponent - 当给出 href 属性时，此属性用于呈现链接。
onFocusVisible - 此属性是一个回调函数，用于在使用键盘聚焦组件时触发回调。
sx - 此属性用于添加自定义样式，并覆盖系统 CSS 样式。
touchRippleRef - 此属性充当 ref，用于指向 TouchRipple 元素。
示例
在此示例中，我们借助 ButtonBase 组件 API 创建了一个自定义的复杂按钮。这是一个非常基本的示例，其中按钮有一些自定义样式，例如背景颜色、颜色、填充等，这些样式是使用 sx 属性定义的。单击按钮时，用户将转到 href 属性中定义的 URL。
import React from "react";
import ButtonBase from "@mui/material/ButtonBase";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<ButtonBase
href="https://tutorialspoint.com"
aria-label="complex button"
sx={{
backgroundColor: "green",
color: "white",
paddingX: 20,
paddingY: 5,
borderRadius: 4,
fontSize: 40,
"&:hover": {
backgroundColor: "#189E02",
},
}}>
Access
</ButtonBase>
</div>
);
}
输出
示例
在此示例中，我们借助 ButtonBase 组件 API 创建了一个自定义的复杂按钮。创建了三个按钮，其中相同的背景图像和标签在数据中定义为数组。然后，我们首先使用 ButtonBase 组件定义了自定义按钮组件，并带有一些宽度、高度和悬停样式。为了获得良好的用户体验，还添加了背景不透明度以及一些自定义样式。定义所有样式后，我们接下来使用 map() 函数添加多个按钮，其中 <CustomButton> 已用作前面定义的所有其他组件（如 ImageSrc、OpacityDrop 等）的根。
import React from "react";
import { styled } from "@mui/material/styles";
import ButtonBase from "@mui/material/ButtonBase";
const data = [
{
img_url:
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg",
img_label: "HTML&CSS basics",
},
{
img_url:
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png",
img_label: "Python for Beginners",
},
{
img_url:
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3187/course_3187_image.jpg",
img_label: "Blockchain",
},
];
const CustomButton = styled(ButtonBase)({
position: "relative",
height: 300,
width: 500,
"&:hover, &.Mui-focusVisible": {
zIndex: 1,
"& .MuiImageBackdrop-root": {
opacity: 0.2,
},
"& .MuiImageMarked-root": {
opacity: 0,
},
},
});
const ImageSrc = styled("span")({
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundSize: "cover",
backgroundPosition: "center 40%",
});
const OpacityDrop = styled("span")({
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: "black",
opacity: 0.4,
});
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
{data.map((image) => ( //mapping custom button to have multiple buttons
<CustomButton
key={image.img_label}
style={{
width: image.width,
}}
>
{/* adding url of the images, backdrop , and text with custom styles */}
<ImageSrc style={{ backgroundImage: `url(${image.img_url})` }} />
<OpacityDrop className="root" />
<img
alt="images"
style={{
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
/>
<h1
style={{
position: "relative",
p: 4,
pt: 2,
color: "white",
}}>
{image.img_label}
</h1>
</CustomButton>
))}
</div>
);
}
输出
在此示例中，当用户单击按钮时，会启用背景，用户可以使用按钮获得良好的体验。
结论
在本文中，我们了解了如何使用 React 在 Material UI 中创建复杂的按钮。通过为应用程序添加高级功能、我们自己的自定义样式和交互式用户体验，我们可以借助 Material UI 创建复杂的按钮。通过组合不同的元素和样式，我们可以创建符合您的设计规范的交互式、丰富的按钮。我们看到了创建具有复杂功能和特性的自定义按钮的完整步骤。除此之外，我们还看到了一些示例，这些示例演示了如何使用 ButtonBase API 组件来创建自定义按钮。
234 次浏览
