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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    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
    cmd

    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 {}
    typescript

    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 {}
    typescript

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

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

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

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

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

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

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

    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';
    scss

    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="avatar-sample initials">
      <igx-avatar initials="JS" size="medium"></igx-avatar>
    </div>
    html

    Creamos el siguiente tema de avatar:

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

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

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

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Custom sizing

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

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

    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>
    html
    .my-app {
      --igx-avatar-size: 200px;
    }
    scss

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

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

    App Builder | CTA Banner

    API References

    Theming Dependencies

    Additional Resources

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