資料結構
網路
關係資料庫管理系統 (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
