Descripción general del componente Avatar Angular

    El componente Avatar Angular ayuda a agregar iniciales, imágenes o íconos de materiales a su aplicación.

    Angular Avatar Example

    Getting Started with Ignite UI for Angular Avatar

    Para comenzar con el componente Ignite UI for Angular Avatar, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importarlosIgxAvatarModule en tu archivo app.module.ts.

    // app.module.ts

...
import { IgxAvatarModule } from 'igniteui-angular/avatar';
// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxAvatarModule],
    ...
})
export class AppModule {}

    Alternativamente,16.0.0 puedes importarlosIgxAvatarComponent como una dependencia independiente.

    // home.component.ts

...
import { IgxAvatarComponent } from 'igniteui-angular/avatar';
// import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-avatar shape="circle"></igx-avatar>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxAvatarComponent]
})
export class HomeComponent {}

    Ahora que tienes importado el módulo o componente de Ignite UI for Angular Avatar, puedes empezar con una configuración básica deligx-avatar componente.

    Using the Angular Avatar Component

    El componente Ignite UI for Angular Avatar viene en tres formas (cuadrado, redondeado y círculo) y tres opciones de tamaño (pequeño, mediano y grande). Se puede utilizar para mostrar iniciales, imágenes o iconos.

    Avatar Shape

    Podemos cambiar la forma del avatar mediante elshape atributo y configurando su valor asquare,rounded ocircle. Por defecto, la forma del avatar lo essquare.

    <igx-avatar shape="circle"></igx-avatar>

    Avatar displaying initials

    Para obtener un avatar sencillo coninitials (i.e. JS de 'Jack Sock'), añade el siguiente código dentro de la plantilla de componentes:

    <igx-avatar initials="JS" shape="circle"></igx-avatar>

    Mejoremos nuestro avatar haciéndolo circular y de mayor tamaño.

    <igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar>

    También podemos cambiar el fondo a través de labackground propiedad o poner un color en las iniciales de lacolor propiedad.

    // avatar.component.scss

igx-avatar {
  background: #e41c77;
  color: #000000;
}
    Warning

    LaroundShape propiedad deligx-avatar componente ha sido obsoleta. En su lugar, se debería usar eseshape atributo.

    Si todo ha ido bien deberías ver algo como lo siguiente en el navegador:

    Avatar displaying image

    Para conseguir un avatar que muestre una imagen, solo tienes que establecer la fuente de la imagen a través de lasrc propiedad.

    <igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
            shape="rounded"
            size="large">
</igx-avatar>

    Si todo ha ido bien deberías ver algo como lo siguiente en el navegador:

    Avatar displaying icon

    De forma análoga, el avatar puede mostrar un icono mediante laicon propiedad. Actualmente, todos los iconos del conjunto de iconos de materiales son compatibles.

    <igx-avatar icon="person"
            shape="rounded"
            size="small">
</igx-avatar>

    Debería ver algo como esto:

    Estilismo

    Avatar Theme Property Map

    Cambiar la$background propiedad actualiza automáticamente las siguientes propiedades dependientes:

    Propiedad principal Propiedad dependiente Descripción
    $background $color El color del texto usado para el avatar.
    $icon color El color del icono que se usa para el avatar.

    Para empezar a estilizar el avatar, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende losavatar-theme valores proporcionadores para los$background parámetros y$border-radius. El$color (o$icon-color) se configura automáticamente en negro o blanco, dependiendo de cuál ofrezca mejor contraste con el fondo especificado. Ten en cuenta que la$border-radius propiedad solo entra en vigor cuando la delshape avatar está configurada comorounded.

    Dado el siguiente marcado:

    <div class="avatar-sample initials">
  <igx-avatar initials="JS" shape="rounded" size="medium"></igx-avatar>
</div>

    Creamos el siguiente tema de avatar:

    $custom-avatar-theme: avatar-theme(
  $background: #72da67,
  $border-radius: 16px
);

    El último paso es pasar el tema de avatar personalizado:

    .initials {
  @include css-vars($custom-avatar-theme);
}

    Si todo ha ido bien deberías ver algo como lo siguiente en el navegador:

    Styling with Tailwind

    Puedes decorarlosavatar usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

    Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    El archivo de utilidad incluye variantes tantolight comodark de tema.

    • Usalight-* clases para el tema ligero.
    • Usadark-* clases para el tema oscuro.
    • Añadir el nombre del componente después del prefijo, por ejemplo, ,light-avatar,dark-avatar.

    Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

    Puedes encontrar la lista completa de propiedades en el tema avatar. La sintaxis es la siguiente:

    <igx-avatar
class="!light-avatar ![--background:#FF4E00]"
initials="DY"
shape="rounded">
</igx-avatar>
    Note

    El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

    Al final, tu avatar debería verse así:

    Custom sizing

    Puedes usar la--size variable, dirigiéndote directamente a:igx-avatar​

    igx-avatar {
  --size: 200px;
}

    O puedes usar la variable universal--igx-avatar-size para dirigirte a todas las instancias:

    <div class="my-app">
  <igx-avatar></igx-avatar>
</div>

    .my-app {
  --igx-avatar-size: 200px;
}

    También puedes usar uno de los tamaños predefinidos, asignándolo a la--ig-size variable, si no se aplica ningún atributo de tamaño. Los valores disponibles para--ig-size son--ig-size-small,--ig-size-medium, y--ig-size-large:

    igx-avatar {
  --ig-size: var(--ig-size-small);
}

    Obtén más información al respecto en el artículo Talla.

    API References

    Theming Dependencies

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.