Visão geral do componente Angular Avatar

    O componente Angular Avatar ajuda a adicionar iniciais, imagens ou ícones de materiais ao seu aplicativo.

    Angular Avatar Example

    Getting Started with Ignite UI for Angular Avatar

    Para começar a usar o componente Ignite UI for Angular Avatar, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar o IgxAvatarModule no seu arquivo 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 {}

    Como alternativa, a partir da 16.0.0 você pode importar o IgxAvatarComponent como uma dependência autônoma.

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

    Agora que você importou o módulo ou componente Ignite UI for Angular Avatar, você pode começar com uma configuração básica do componente igx-avatar.

    Using the Angular Avatar Component

    O componente Ignite UI for Angular Avatar vem em três formatos (quadrado, arredondado e círculo) e três opções de tamanho (pequeno, médio e grande). Ele pode ser usado para exibir iniciais, imagens ou ícones.

    Avatar Shape

    Podemos alterar o formato do avatar por meio do atributo shape definindo seu valor como square, rounded ou circle. Por padrão, o formato do avatar é square.

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

    Avatar displaying initials

    Para obter um avatar simples com initials (por exemplo, JS para 'Jack Sock'), adicione o seguinte código dentro do modelo do componente:

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

    Vamos melhorar nosso avatar tornando-o circular e maior em tamanho.

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

    Também podemos alterar o fundo através da propriedade background ou definir uma cor nas iniciais através da propriedade color.

    // avatar.component.scss

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

    A propriedade roundShape do componente igx-avatar foi descontinuada. O atributo shape deve ser usado em seu lugar.

    Se tudo correr bem, você deverá ver algo como o seguinte no navegador:

    Avatar displaying image

    Para obter um avatar que exiba uma imagem, tudo o que você precisa fazer é definir a fonte da imagem por meio da propriedade src.

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

    Se tudo correr bem, você deverá ver algo como o seguinte no navegador:

    Avatar displaying icon

    Analogicamente, o avatar pode exibir um ícone por meio da propriedade icon. Atualmente, todos os ícones do conjunto de ícones de material são suportados.

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

    Você deverá ver algo assim:

    Estilização

    Para começar a estilizar o avatar, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

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

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

    Seguindo a abordagem mais simples, criamos um novo tema que estende o avatar-theme e aceita os parâmetros $background, $color e $border-radius.

    Dada a seguinte marcação:

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

    Criamos o seguinte tema de avatar:

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

    O último passo é passar o tema do avatar personalizado:

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

    Se tudo correr bem, você deverá ver algo como o seguinte no navegador:

    Custom sizing

    Você pode usar a variável--size, direcionando diretamente o igx-avatar:

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

    Ou você pode usar a variável universal--igx-avatar-size para direcionar todas as instâncias:

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

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

    Você também pode usar um dos tamanhos predefinidos, atribuindo-o à variável--ig-size, se não houver atributo de tamanho aplicado. Os valores disponíveis para--ig-size são--ig-size-small,--ig-size-medium e--ig-size-large:

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

    Saiba mais sobre isso no artigo Tamanho.

    API References

    Theming Dependencies

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.