Descripción general del componente Angular Avatar

    El componente Angular Avatar 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 a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxAvatarModule en su archivo app.module.ts.

    // app.module.ts

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

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

    Alternativamente, a partir de 16.0.0 puede importar IgxAvatarComponent como una dependencia independiente.

    // home.component.ts

...
import { IgxAvatarComponent } from 'igniteui-angular';
// 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 ha importado el módulo o componente Ignite UI for Angular Avatar, puede comenzar con una configuración básica del componente igx-avatar.

    Using the Angular Avatar Component

    El componente Ignite UI for Angular Avatar viene en tres formas (cuadrada, redondeada y circular) 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 a través del atributo de shape estableciendo su valor en square, rounded o circle. Por defecto, la forma del avatar es square.

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

    Avatar displaying initials

    Para obtener un avatar simple con initials (es decir, JS para 'Jack Sock'), agregue el siguiente código dentro de la plantilla del componente:

    <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 la propiedad background o establecer un color en las iniciales a través de la propiedad color.

    // avatar.component.scss

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

    La propiedad roundShape del componente igx-avatar ha quedado obsoleta. En su lugar, se debe utilizar el atributo shape.

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

    Avatar displaying image

    Para obtener un avatar que muestre una imagen, todo lo que tienes que hacer es configurar la fuente de la imagen a través de la propiedad src.

    <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 manera análoga, el avatar puede mostrar un ícono a través de la propiedad icon. Actualmente se admiten todos los iconos del conjunto de iconos de materiales.

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

    Debería ver algo como esto:

    Estilismo

    Para comenzar a diseñar el avatar, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

    @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 simple, creamos un nuevo tema que extiende el avatar-theme y acepta los parámetros $background, $color y $border-radius.

    Dado el siguiente marcado:

    <div class="initials-avatar">
    <igx-avatar>BA</igx-avatar>
</div>

    Necesitamos crear un tema:

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

    Using CSS variables

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

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

    Using mixins

    Para diseñar componentes para Internet Explorer 11 y navegadores anteriores, tenemos que utilizar un enfoque diferente, ya que no admite variables CSS.

    Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep. Por otro lado, para evitar que el tema personalizado se filtre a otros componentes, asegúrese de incluir el selector:host antes de::ng-deep:

    :host {
    ::ng-deep {
        // Pass the custom avatar theme to the `igx-avatar` mixin
        .initials-avatar {
            @include avatar($custom-avatar-theme);
        }
    }
}

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

    Custom sizing

    Puede utilizar la variable, dirigiéndose directamente a la--size​ ​igx-avatar variable :

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

    O bien, puede utilizar la variable universal--igx-avatar-size para dirigirse a todas las instancias:

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

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

    También puede utilizar uno de los tamaños predefinidos, asignándolo a la--ig-size variable, si no se aplica ningún atributo size. 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.