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

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

    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 mudar a forma do avatar peloshape atributo definindo seu valor parasquare,rounded oucircle. Por padrão, a forma do avatar ésquare.

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

    Avatar displaying initials

    Para obter um avatar simples cominitials (i.e. JS de 'Jack Sock'), adicione o seguinte código dentro do template de 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 mudar o fundo através dabackground propriedade ou definir uma cor nas iniciais através dacolor propriedade.

    // avatar.component.scss

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

    AroundShape propriedade doigx-avatar componente foi descontinuada. Oshape atributo deve ser usado em vez disso.

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

    Avatar displaying image

    Para conseguir um avatar que exiba uma imagem, tudo o que você precisa fazer é definir a fonte da imagem via asrc propriedade.

    <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 via aicon propriedade. Atualmente, todos os ícones do conjunto de ícones de materiais são suportados.

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

    Para começar a estilizar o avatar, precisamos importar oindex arquivo, onde todas as funções de tema e mixagens de componentes estão ativas:

    @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 osavatar-theme valores fornecidos para os$background parâmetros e.$border-radius O$color (ou$icon-color) é automaticamente definido para preto ou branco, dependendo de qual oferece melhor contraste com o fundo especificado. Note que a$border-radius propriedade só entra em vigor quando a doshape avatar está definida pararounded.

    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

    Você pode usar a--size variável, direcionando diretamente oigx-avatar seguinte:

    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 pré-definidos, atribuindo-o à--ig-size variável, caso não haja 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.