React MUI AvatarGroup API

React MUI 是一个UI库，为React提供预定义的强大和可自定义的组件，以便更轻松地进行网页开发。MUI设计基于Google的Material Design。Material-UI是一个用户界面库，提供预定义和可自定义的React组件，以实现更快速和简易的网页开发，这些Material-UI组件基于Google的Material Design。

在本文中，我们将讨论 React MUI AvatarGroup API。 AvatarGroup用于将不同的头像分组，供用户交互使用。

导入AvatarGroup API：

import AvatarGroup from '@mui/material/AvatarGroup'

属性列表：

children： 用于表示头像的内容。
classes： 可用于覆盖或扩展应用于组件的样式。
component： 用于定义用于根节点的组件。
total： 用于表示头像的总数。
spacing： 用于表示头像之间的间距。
max： 用于表示要显示的头像的最大数量。
sx： 用于向头像添加自定义CSS样式。
variant： 用于选择不同的头像变体。

CSS规则：

root (MuiAvatarGroup-root)： 应用于根元素的样式。
avatar (MuiAvatarGroup-avatar)： 应用于头像的样式。

方法： 让我们创建一个React项目并安装React MUI模块。然后，我们将创建一个UI来展示React MUI AvatarGroup API。

创建React项目：

步骤1： 要创建一个React应用程序，需要通过npx命令安装React模块。

npx create-react-app project_name

步骤2： 创建完你的React项目后，进入文件夹执行不同的操作。

cd project_name

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需模块：

npm install @mui/material @emotion/react @emotion/styled

项目结构： 在执行上述步骤中提到的命令后，如果您在编辑器中打开项目，您可以看到与下图类似的项目结构。我们将在源文件夹中进行新组件用户制作或代码更改。

React MUI AvatarGroup API

运行应用程序的步骤： 使用以下命令从项目的根目录运行应用程序：

npm start

示例1： 我们正在创建一个显示 MUI AvatarGroup API 的用户界面。

文件名：App.js

import * as React from 'react'; 
import Avatar from '@mui/material/Avatar'; 
import AvatarGroup from '@mui/material/AvatarGroup'; 
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}> 
                GeeksforGeeks 
            </h1> 
            <h3><u>React MUI AvatarGroup API</u></h3> 
            <AvatarGroup variant="round" 
                sx={{ maxWidth: "200px" }} 
                spacing="medium"> 
                <Avatar sx={{ bgcolor: "green" }}> 
                    G 
                </Avatar> 
                <Avatar sx={{ bgcolor: "green" }}> 
                    E 
                </Avatar> 
                <Avatar sx={{ bgcolor: "green" }}> 
                    E 
                </Avatar> 
                <Avatar sx={{ bgcolor: "green" }}> 
                    K 
                </Avatar> 
                <Avatar sx={{ bgcolor: "green" }}> 
                    S 
                </Avatar> 
            </AvatarGroup> 
        </div> 
    ); 
}

您现在打开您的浏览器并前往http://localhost:3000/，您将看到以下输出：

React MUI AvatarGroup API

示例2 ：我们正在创建一个显示 MUI AvatarGroup API 的用户界面。

文件名：App.js

import * as React from 'react'; 
import Avatar from '@mui/material/Avatar'; 
import AvatarGroup from '@mui/material/AvatarGroup'; 
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}> 
                GeeksforGeeks 
            </h1> 
              
            <h3><u>React MUI AvatarGroup API</u></h3> 
              
            <AvatarGroup total={10} max={5}  
                sx={{ maxWidth: "200px" }} 
                spacing="medium"> 
                <Avatar sx={{ bgcolor: "red" }}>#</Avatar> 
                <Avatar sx={{ bgcolor: "green" }}>G</Avatar> 
                <Avatar sx={{ bgcolor: "green" }}>F</Avatar> 
                <Avatar sx={{ bgcolor: "green" }}>G</Avatar> 
            </AvatarGroup> 
        </div> 
    ); 
}

输出：现在打开你的浏览器并访问 http://localhost:3000/，你将看到以下输出：

React MUI AvatarGroup API