Avatar Web Components

    El avatar Ignite UI for Web Components ayuda a mostrar iniciales, imágenes o íconos en su aplicación.

    Web Components Icon Avatar Example

    Usage

    Primero, debe instalar el paquete npm Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';

defineComponents(IgcAvatarComponent);

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

    El IgcAvatarComponent es capaz de mostrar imágenes, iniciales o cualquier otro contenido, incluidos iconos. Declarar un IgcAvatarComponent es tan simple como:

    <igc-avatar></igc-avatar>

    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.

    <igc-avatar>
  <igc-icon name="home"></igc-icon>
</igc-avatar>

    Initials

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

    <!-- Initials("AZ") will be displayed instead of the icon. -->

<igc-avatar initials="AZ">
  <igc-icon name="home"></igc-icon>
</igc-avatar>

    Image

    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.

    <igc-avatar
  initials="AZ"
  src="https://es.infragistics.com/angular-demos/assets/images/men/1.jpg"
  alt="A photo of a man.">
  <igc-icon name="home"></igc-icon>
</igc-avatar>

    Shape

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

    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);
}

    Styling

    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;
}

    API References

    Additional Resources