数据结构
网络
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 次查看
