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.

    The next step is to import the IgxAvatarModule in your app.module.ts file.

    // app.module.ts

...
import { IgxAvatarModule } from 'igniteui-angular';
// 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';
// 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 {}

    Now that you have the Ignite UI for Angular Avatar module or component imported, you can start with a basic configuration of the igx-avatar component.

    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

    We can change the avatar shape through the shape attribute setting its value to square, rounded or circle. By default, the shape of the avatar is square.

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

    Avatar displaying initials

    To get a simple avatar with initials (i.e. JS for 'Jack Sock'), add the following code inside the component template:

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

    We can also change the background through the background property or set a color on the initials through the color property.

    // avatar.component.scss

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

    The roundShape property of the igx-avatar component have been deprecated. The shape attribute should be used instead.

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

    Avatar displaying image

    To get an avatar that displays an image, all you have to do is set the image source via the src property.

    <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

    Analogically, the avatar can display an icon via the icon property. Currently all icons from the material icon set are supported.

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

    Debería ver algo como esto:

    Estilismo

    To get started with styling the avatar, we need to import the index file, where all the theme functions and component mixins live:

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

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

    Following the simplest approach, we create a new theme that extends the avatar-theme providing values for the $background and $border-radius parameters. The $color (or $icon-color) is automatically set to either black or white, depending on which offers better contrast with the specified background. Note that the $border-radius property only takes effect when the avatar's shape is set to rounded.

    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:

    Custom sizing

    You can either use the --size variable, targeting the igx-avatar directly:

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

    Or you can use the universal --igx-avatar-size variable to target all instances:

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

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

    You can also use one of the predefined sizes, assigning it to the --ig-size variable, if theres no size attribute applied. The available values for --ig-size are --ig-size-small, --ig-size-medium, and --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.