Componente de avatar de diseño de hormiga ReactJS UI

. Los componentes de avatar se utilizan para representar personas u objetos y admiten iconos, letras o imágenes. Podemos usar el siguiente enfoque en ReactJS para usar el componente Ant Design Avatar.

Accesorios de avatar:

• alt: Se utiliza para definir el texto alternativo que describe la imagen.
• espacio: Es la unidad de distancia del tipo de letra entre los lados izquierdo y derecho.  
• icono: se utiliza para definir el tipo de icono personalizado para un avatar de icono.  
• forma: Se utiliza para indicar la forma del avatar. 
• tamaño: Se utiliza para indicar el tamaño del avatar.  
• src: se utiliza para pasar la dirección de la imagen para un elemento de imagen o avatar.
• srcSet: Se usa para definir la lista de fuentes a usar para diferentes resoluciones de pantalla.  
• arrastrable: se utiliza para indicar si la imagen se puede arrastrar o no.  
• onError: es una función de devolución de llamada que se activa cuando se produce un error de carga de imagen.

Accesorios de Avatar.Group:

• maxCount: Se utiliza para definir el máximo de avatares a mostrar.  
• maxPopoverPlacement: Se utiliza para la colocación de popover de avatar en exceso.  
• maxStyle: Se utiliza para definir el estilo sobrante del avatar.  
• tamaño: Se utiliza para indicar el tamaño del avatar.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import "antd/dist/antd.css";
import { Avatar } from 'antd';
  
export default function App() {
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Avatar Component</h4>
      <Avatar.Group>
        <Avatar style={{ backgroundColor: 'gray' }}>
          A
        </Avatar>
        <Avatar style={{ backgroundColor: 'blue' }}>
          B
        </Avatar>
        <Avatar style={{ backgroundColor: 'lightblue' }}>
          C
        </Avatar>
      </Avatar.Group>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://ant.design/components/avatar/