数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在 Material UI 中对齐和重叠徽章？
徽章在网页 UI 设计中扮演着重要角色，无论您是在构建社交媒体网站、消息应用程序，还是任何其他需要使用徽章的应用。
因此，在本文中，我们将学习如何在 Material UI 中对齐和重叠徽章。
但在深入探讨在 MUI 中对齐和重叠徽章的步骤之前，让我们首先了解徽章究竟是什么。
什么是徽章？
徽章是一个小组件，通常位于称为子组件的组件的右上角。徽章可能包含数字、文本或只是一个点。在 React MUI 中，这些徽章可以对齐在不同的位置，例如顶部、底部、右侧、左侧等，不同的徽章也可以与其他元素重叠。
Badge API
Badge API 用于将徽章添加到 React MUI 的不同组件中。它带有以下属性：
anchorOrigin - 此属性定义徽章组件的锚点。
badgeContent - 使用 badgeContent 属性来渲染徽章的内容。
children - 我们可以使用“children”属性在徽章中添加任何所需的内容。
classes - classes 属性用于覆盖组件的样式。
color - color 属性允许自定义徽章颜色。
component - 这将渲染徽章中的根组件。
components - 这将渲染徽章或根组件内的其他徽章组件。
componentsProps - 这些是徽章组件的属性。
invisible - 要使徽章不可见，请使用此属性。
max - 它显示徽章中最大计数。最大值为 99。
overlap - 它允许徽章重叠。
showZero - 当计数为 0 时，此属性用于值控制。
slotProps - 使用此属性渲染插槽的其他属性。
slots - 这些是徽章内每个插槽使用的组件。
sx - 要为此组件添加自定义样式，请使用“sx”属性。
variant - 要添加不同变体的徽章，请使用 variant 属性。
对齐和重叠徽章所需的步骤
以下是 Material UI 中对齐和重叠徽章的步骤：
步骤 1：创建 React 应用
在 MUI 中重叠和对齐徽章的第一步是创建一个 React 应用。要创建一个新的 React 应用，请在您的终端中运行以下命令：
npx create react app badgedesignproject
项目创建完成后，通过运行以下命令导航到其目录：
cd badgedesignproject
步骤 2：将 MUI 添加到 React
创建 React 应用后，是时候将 Material UI 安装到 React 应用中了。要安装 MUI，请运行以下命令：
npm install @mui/material @emotion/react @emotion/styled
步骤 3：创建徽章
要添加或创建徽章，我们使用 <Badge> API 组件。以下是相同的语法：
<Badge> <IconName /> </Badge>
步骤 4：对齐和重叠徽章
在 MUI 中对齐徽章非常容易，重叠也是如此。要对齐徽章，我们将其放在四个位置：右上角、左上角、右下角和左下角。下面显示了两种用法：
<Badge anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }} >
<IconName />
</Badge>
现在让我们看看使用不同方法对齐和重叠的一些示例。
示例
在这个示例中，我们分别在四个不同的位置重叠了不同的徽章：左上角、右上角、左下角和右下角。overlap 属性用于执行此操作，我们可以在其中定义圆形或矩形值。圆形会在元素上创建一个圆形重叠，而矩形会创建一个矩形重叠。
import React from "react";
import { Badge } from "@mui/material";
import { Downloading } from "@mui/icons-material";
const App = () => {
return (
<div
style={{
padding: 40,
gap: 40,
display: "flex",
flexDirection: "row"
}}>
<Badge
overlap="circular"
badgeContent={4}
color="success"
anchorOrigin={{
vertical: "top",
horizontal: "left"
}}>
<Downloading sx={{ fontSize: 50 }} color="success" />
</Badge>
<Badge
overlap="circular"
badgeContent={5}
color="info"
anchorOrigin={{
vertical: "top",
horizontal: "right"
}}>
<Downloading sx={{ fontSize: 50 }} color="info" />
</Badge>
<Badge
overlap="circular"
badgeContent={6}
color="warning"
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}>
<Downloading sx={{ fontSize: 50 }} color="warning" />
</Badge>
<Badge
overlap="circular"
badgeContent={3}
color="error"
anchorOrigin={{
vertical: "bottom",
horizontal: "right"
}}>
<Downloading sx={{ fontSize: 50 }} color="error" />
</Badge>
</div>
);
};
export default App;
输出
示例
下面给出了另一个使用不同方法的示例及其代码：
在这个示例中，我们创建了一个与其他元素重叠的自定义徽章。在这里，徽章使用 &.MuiBadge-badge 属性进行自定义，我们在此定义自定义样式。
import React from "react";
import { Badge } from "@mui/material";
import { styled } from "@mui/material/styles";
import { Downloading } from "@mui/icons-material";
const MuiBadgeCust = styled(Badge)(() => ({
"& .MuiBadge-badge": {
right: 10,
top: 10,
padding: "0 4px",
border: "2px dotted black"
}
}));
const App = () => {
return (
<div
style={{
padding: 40,
gap: 40,
display: "flex",
flexDirection: "row"
}}>
<MuiBadgeCust badgeContent={4} color="success">
<Downloading sx={{ fontSize: 40 }} color="success" />
</MuiBadgeCust>
<MuiBadgeCust badgeContent={5} color="info">
<Downloading sx={{ fontSize: 50 }} color="info" />
</MuiBadgeCust>
<MuiBadgeCust badgeContent={6} color="warning">
<Downloading sx={{ fontSize: 60 }} color="warning" />
</MuiBadgeCust>
<MuiBadgeCust badgeContent={3} color="error">
<Downloading sx={{ fontSize: 70 }} color="error" />
</MuiBadgeCust>
</div>
);
};
export default App;
输出
结论
在本文中，我们学习了如何在 React MUI 中将徽章与其他元素对齐和重叠。已经解释了执行此任务的完整步骤，并同时显示了不同的示例以更好地理解。
浏览量：157
