資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Material UI 中建立不同的頭像？
為了改進任何 Material UI 應用程式的使用者設計，頭像發揮著重要作用。頭像在各個地方都很常見，例如社交媒體個人資料部分、帖子等，但是如何在 React 中使用 MUI 建立這些頭像呢？因此，在本文中，我們將學習如何在 Material UI 中建立不同的頭像。
但在深入瞭解在 MUI 中建立不同頭像的步驟之前，讓我們首先了解頭像到底是什麼。
什麼是頭像？
頭像是一種元素，用於視覺上表示使用者或其他實體。Material UI 是一個 React UI 框架，提供了一系列符合 Google 的 Material Design 原則的元素和樣式選項。頭像通常用於材質設計，出現在表格和對話方塊選單中。它們在使用者介面中用於顯示個人資料圖片、圖示或影像。
Avatar API
Avatar API 用於將不同的頭像整合到 React MUI 中。它帶有一些屬性 -
alt - 當我們使用 src 屬性渲染 img 元件時，使用此屬性。
children - 我們可以使用“children”屬性在頭像中新增任何所需的內容。
classes - classes 屬性用於覆蓋元件的樣式
component - 這會在頭像中渲染根元件。
imgProps - 使用 img 元素時，會應用這些屬性。
sizes - 要將頭像修改為不同的尺寸，我們使用 size 屬性
src - 當影像被渲染時，此屬性用於提供影像 URL 或源。
srcSet - 使用影像時，此屬性提供響應性。
sx - 要為此元件新增自定義樣式，請使用“sx”屬性。
variant - 要新增頭像的不同變體，使用 variant 屬性。
建立頭像所需的步驟
以下是建立 Material UI 中不同頭像的步驟 -
步驟 1：建立一個 React 應用程式
在 MUI 中建立頭像的第一步是建立一個 React 應用程式。要建立一個新的 React 應用程式，請在您的終端中執行以下命令 -
npx create react app avatarproject
專案建立完成後，透過執行以下命令導航到其目錄 -
cd avatarproject
步驟 2：將 MUI 新增到 React
建立 React 應用程式後，是時候將 Material UI 安裝到 React 應用程式中了。要安裝 MUI，請執行以下命令 -
npm install @mui/material @emotion/react @emotion/styled
步驟 3：建立頭像
要新增或建立不同的頭像，我們使用 <Avatar> 元件。以下是相同的語法 -
<Avatar> Text </Avatar>
示例
在此示例中，我們建立了一個包含文字的頭像。文字頭像可以具有任何字串值，例如字母、單詞或數字。
import React from "react";
import Stack from "@mui/material/Stack";
import Avatar from "@mui/material/Avatar";
function App() {
return (
<div style={{padding: 40,gap: 20,}}>
<Stack direction="row" spacing={1}>
<Avatar sx={{backgroundColor: 'green'}}>T</Avatar>
</Stack>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們建立了一個影像頭像。影像頭像是一種顯示影像的頭像。這些型別的頭像通常用於社交媒體圖示，例如個人資料圖示等。
import React from "react";
import { Avatar, Stack } from "@mui/material";
const App = () => {
return (
<div style={{padding: 40,gap: 20,}}>
<Stack direction="row" spacing={1}>
<Avatar alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" sx={{ width: 36, height: 36}}/>
<Avatar alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" sx={{ width: 56, height: 56}}/>
<Avatar alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" sx={{ width: 76, height: 76}}/>
<Avatar alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" sx={{ width: 96, height: 96}}/>
</Stack>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們建立了一個圖示頭像。圖示頭像是一種在其中包含圖示的頭像。我們可以透過將 <IconName/> 作為子元素傳遞到 <Avatar> 元件之間來在頭像元件中使用任何圖示。
import React from "react";
import { Avatar, Stack } from "@mui/material";
import Camera from "@mui/icons-material/Camera";
import Search from "@mui/icons-material/Search";
import Send from "@mui/icons-material/Send";
import Share from "@mui/icons-material/Share";
const App = () => {
return (
<div style={{padding: 40,gap: 20,}}>
<Stack direction="row" spacing={1}>
<Avatar sx={{backgroundColor: 'green'}}><Camera /></Avatar>
<Avatar sx={{backgroundColor: 'blue'}}><Send /></Avatar>
<Avatar sx={{backgroundColor: 'red'}}><Share /></Avatar>
<Avatar sx={{backgroundColor: 'black'}}><Search /></Avatar>
</Stack>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們組合了多個頭像。要組合類似的頭像，我們可以使用 <AvatarGroup> 元件。該示例顯示了多個頭像如何組合在一起。在這裡，我們還可以傳遞一個名為 max 的屬性，該屬性一次只顯示最大數量的頭像，例如在示例中，該屬性設定為 5。
import React from "react";
import { Avatar, AvatarGroup } from "@mui/material";
import Camera from "@mui/icons-material/Camera";
const App = () => {
return (
<div style={{padding: 40,gap: 20}}>
<AvatarGroup max={5}>
<Avatar sx={{ backgroundColor: "green" }}>
<Camera />
</Avatar>
<Avatar
alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ"
sx={{ width: 40, height: 40 }}
/>
<Avatar sx={{ backgroundColor: "green" }}>T</Avatar>
<Avatar sx={{ backgroundColor: "green" }}>U</Avatar>
<Avatar sx={{ backgroundColor: "green" }}>T</Avatar>
<Avatar sx={{ backgroundColor: "green" }}>O</Avatar>
</AvatarGroup>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們建立了帶有徽章的頭像。徽章，如點、方塊和許多其他型別，可以新增到頭像中以新增更好的 UI。
import React from "react";
import { Avatar, Badge, Stack } from "@mui/material";
import Camera from "@mui/icons-material/Camera";
const App = () => {
return (
<div style={{padding: 40,gap: 20,}}>
<Stack direction="row" spacing={1}>
<Badge color="secondary" overlap="circular"
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
variant="dot">
<Avatar sx={{ backgroundColor: 'yellow' }}><Camera /></Avatar>
</Badge>
<Badge color="error" overlap="circular"
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
variant="dot">
<Avatar alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" sx={{ width: 40, height: 40 }} />
</Badge>
<Badge color="info" overlap="circular"
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
variant="dot">
<Avatar sx={{ backgroundColor: 'lightblue' }}>T</Avatar>
</Badge>
</Stack>
</div>
);
};
export default App;
輸出
結論
本文討論了在 Material UI 中建立不同頭像的完整步驟。我們已經看到了在 MUI 中建立頭像的不同方法，例如文字頭像、影像頭像、圖示等。
134 次檢視
