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 issoIgxAvatarModule no seu arquivo 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 você pode importar comoIgxAvatarComponent uma dependência independente.

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

    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

    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

    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>

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

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

    Se tudo correr bem, você deverá ver algo como o seguinte no 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>

    Se tudo correr bem, você deverá ver algo como o seguinte no 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>

    Você deverá ver algo assim:

    Estilização

    Avatar Theme Property Map

    Alterar a$background propriedade atualiza automaticamente as seguintes propriedades dependentes:

    Propriedade primária Propriedade dependente Descrição
    $background $color A cor do texto usada para o avatar.
    $icon cor A cor do ícone usada para o avatar.

    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.

    Dada a seguinte marcação:

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

    Criamos o seguinte tema de avatar:

    $custom-avatar-theme: avatar-theme(
  $background: #72da67,
  $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:

    Styling with Tailwind

    Você pode usaravatar nossas classes utilitárias personalizadas de Tailwind. Certifique-se de configurar o Tailwind primeiro.

    Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

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

    O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

    • Uselight-* as aulas para o tema da luz.
    • Usedark-* classes para o tema sombrio.
    • Adicione o nome do componente após o prefixo, por exemplo,light-avatar,dark-avatar.

    Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

    Você pode encontrar a lista completa de propriedades no tema avatar. A sintaxe é a seguinte:

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

    O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

    No final, seu avatar deve parecer assim:

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

    Saiba mais sobre isso no artigo Tamanho.

    API References

    Theming Dependencies

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.