Avatar Web Components

    O Avatar Ignite UI for Web Components ajuda a exibir iniciais, imagens ou ícones em seu aplicativo.

    Web Components Icon Avatar Example

    Usage

    Primeiro, você precisa instalar o pacote npm Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';

defineComponents(IgcAvatarComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    O IgcAvatarComponent é capaz de exibir imagens, iniciais ou qualquer outro conteúdo, incluindo ícones. Declarar um IgcAvatarComponent é tão simples quanto:

    <igc-avatar></igc-avatar>

    O avatar tem vários atributos que permitem renderizar conteúdo diferente com base no contexto. A maneira mais básica de exibir conteúdo nos limites do avatar é fornecer conteúdo entre as tags de abertura e fechamento.

    <igc-avatar>
  <igc-icon name="home"></igc-icon>
</igc-avatar>

    Initials

    Se o atributo initials estiver definido, todos os elementos filhos do avatar serão ignorados e a string passada para esse atributo será exibida.

    <!-- Initials("AZ") will be displayed instead of the icon. -->

<igc-avatar initials="AZ">
  <igc-icon name="home"></igc-icon>
</igc-avatar>

    Image

    O avatar também pode exibir uma imagem quando o atributo src recebe uma URL válida para um ativo estático. Nesse caso, o valor initials será ignorado e os elementos filhos não serão renderizados.

    <igc-avatar
  initials="AZ"
  src="https://pt-br.infragistics.com/angular-demos/assets/images/men/1.jpg"
  alt="A photo of a man.">
  <igc-icon name="home"></igc-icon>
</igc-avatar>

    Shape

    O avatar suporta três formas -circle, rounded e square. A forma padrão do avatar é square e pode ser alterada por meio do atributo shape.

    Tamanho

    Além do formato, o tamanho do avatar também pode ser alterado utilizando a variável CSS--ig-size. Os tamanhos suportados são small (padrão), medium e large. O seguinte trecho de código mostra como usar um tamanho de componente diferente:

    igc-avatar {
  --ig-size: var(--ig-size-large);
}

    Styling

    The IgcAvatarComponent component exposes several CSS parts, giving you full control over its style:

    Nome Descrição
    base The base wrapper of the avatar.
    initials The initials wrapper of the avatar.
    image The image wrapper of the avatar.
    icon The icon wrapper of the avatar. 
    igc-avatar::part(base) {
  --size: 60px;
  color: var(--ig-success-500-contrast);
  background: var(--ig-success-500);;
  border-radius: 20px;
}

    API References

    Additional Resources