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

    O IgcAvatarComponent componente expõe várias partes CSS, dando a você controle total sobre seu estilo:

    Nome Descrição
    base O invólucro base do avatar.
    initials O invólucro inicial do avatar.
    image O wrapper de imagem do avatar.
    icon O invólucro de ícone do 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