Reaccionar API de avatar de MUI

:MUI o Material-UI es una biblioteca de interfaz de usuario que proporciona componentes robustos y personalizables predefinidos para React para facilitar el desarrollo web. El diseño de MUI se basa en la parte superior de Material Design de Google.

En este artículo, vamos a discutir la API de avatar de React MUI . Los avatares son imágenes de perfil que generalmente se usan para usuarios registrados. Los avatares se encuentran generalmente desde tablas hasta menús de diálogo. La API proporciona muchas funcionalidades y aprenderemos a implementarlas.

API de importación de avatares

import Avatar from '@mui/material/Avatar';
// or
import { Avatar } from '@mui/material';

Lista de accesorios: aquí está la lista de diferentes accesorios utilizados con este componente. Podemos acceder a ellos y modificarlos según nuestras necesidades.

• children (Node): Es un componente similar a la fila de la tabla.
• clases (Objeto): reemplaza los estilos existentes o agrega nuevos estilos al componente.
• componente (elementType): Es el componente utilizado para el Node raíz. Puede ser una string HTML o un componente.
• sx (Array<func/objeto/bool>/func/objeto): La propiedad del sistema permite definir anulaciones del sistema, así como estilos CSS adicionales.
• alt: Es el atributo alternativo en lugar de la imagen renderizada.
• imgProps: Son los accesorios aplicados al elemento img.
• tamaños: El atributo de tamaño se utiliza para modificar el tamaño del avatar.
• src: Es la fuente de la imagen que se proporciona.
• srcSet: este atributo se usa para la visualización receptiva.
• variante (circular/redondeada/cuadrada): este atributo se utiliza para cambiar la forma del avatar.

Sintaxis: cree un avatar de la siguiente manera:

<Avatar alt="GeeksforGeeks" 
    src="/static/images/avatar/gfgIcon.jpg" />

Instalar y crear la aplicación React y agregar las dependencias de MUI:

Paso 1: Cree un proyecto de reacción usando el siguiente comando.

npx create-react-app gfg_tutorial

Paso 2: Entrar en el directorio del proyecto

cd gfg_tutorial

Paso 3: instale las dependencias de MUI de la siguiente manera:

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

Paso 4: Ejecute el proyecto de la siguiente manera:

npm start

Ejemplo 1: En el siguiente ejemplo, tenemos un Avatar básico.

import "./App.css";
import React from "react";
import Avatar from "@mui/material/Avatar";
function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1 style={{
                    color: "green",
                }}>
                    GeeksforGeeks
                </h1>
            </div>
            <div style={{
                width: "fit-content",
                margin: "auto",
            }}>
                <strong>React MUI Avatar API</strong>
            </div>
  
            <center>
                <Avatar
                    alt="GeeksforGeeks"
                    src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                />
            </center>
        </div>
    );
}
  
export default App;

Producción:

 

Ejemplo 2: En el siguiente ejemplo, tenemos avatares de diferentes formas.

import "./App.css";
import React from "react";
import Avatar from "@mui/material/Avatar";
function App() {
    return (
        <div className="App">
            <div className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}>
                <h1 style={{
                    color: "green",
                }}>
                    GeeksforGeeks
                </h1>
            </div>
            <div style={{
                width: "fit-content",
                margin: "auto",
            }}>
                <strong>React MUI Avatar API</strong>
            </div>
            <br />
            <div style={{
                margin: "auto",
                display: "flex",
                justifyContent: "space-evenly",
            }}>
                <Avatar
                    variant="circular"
                    alt="GeeksforGeeks"
                    src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                />
                <Avatar
                    variant="rounded"
                    alt="GeeksforGeeks"
                    src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                />
                <Avatar
                    variant="square"
                    alt="GeeksforGeeks"
                    src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                />
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://mui.com/material-ui/api/avatar/