React Avatar

    La Ignite UI for React Avatar ayuda a mostrar iniciales, imágenes o íconos en su aplicación.

    Ejemplo de avatar de icono React

    EXAMPLE
    TSX

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react
    cmd

    A continuación, tendrás que importar el IgrAvatar CSS necesario y registrar su módulo, así:

    import { IgrAvatarModule, IgrAvatar } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    IgrAvatarModule.register();
    tsx

    Para obtener una introducción completa a la Ignite UI for React, lea el tema Primeros pasos.

    Es IgrAvatar capaz de mostrar imágenes, iniciales o cualquier otro contenido, incluidos iconos. Declarar an IgrAvatar es tan simple como:

    <IgrAvatar />
    tsx

    El avatar tiene varios atributos que permiten representar contenido diferente según el contexto. La forma más básica de mostrar contenido dentro de los límites del avatar es proporcionar contenido entre las etiquetas de apertura y cierre.

    <IgrAvatar>
        <IgrIcon name="home" />
    </IgrAvatar>
    tsx

    Iniciales

    Si se establece el atributo initials, se ignorarán todos los elementos secundarios del avatar y se mostrará la cadena pasada a este atributo.

    <IgrAvatar initials="AZ">
        <IgrIcon name="home" />
    </IgrAvatar>
    tsx

    EXAMPLE
    TSX

    Imagen

    El avatar también puede mostrar una imagen cuando al atributo src se le asigna una URL válida a un activo estático. En ese caso, se ignorará el valor initials y los elementos secundarios no se representarán.

    <IgrAvatar initials="AZ"
               src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"
               alt="A photo of a man.">
        <IgrIcon name="home" />
    </IgrAvatar>
    tsx

    EXAMPLE
    TSX

    Forma

    El avatar admite tres formas: circle, rounded y square. La forma predeterminada del avatar es square y se puede cambiar mediante el atributo shape.

    EXAMPLE
    TSX

    Tamaño

    Además de la forma, el tamaño del avatar también se puede cambiar utilizando la variable CSS--ig-size. Los tamaños admitidos son small (predeterminado), medium y large. El siguiente fragmento de código muestra cómo utilizar un tamaño de componente diferente:

    igc-avatar {
        --ig-size: var(--ig-size-large);
    }
    css

    EXAMPLE
    TSX
    CSS

    Estilo

    El componente de avatar expone una parte base que se puede usar para cambiar todas sus propiedades de estilo.

    igc-avatar::part(base) {
      --size: 72px;
      color: olive;
      background: beige;
      border-radius: 20px;
    }
    css
    Ignite UI for React | CTA Banner

    Referencias de API

    Recursos adicionales