React Avatar

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

    React Icon Avatar Example

    Usage

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

    npm install igniteui-react

    Em seguida, você precisará importar o e seu IgrAvatar CSS necessário, assim:

    import { IgrAvatar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

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

    <IgrAvatar />

    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.

    <IgrAvatar>
    <IgrIcon name="home" />
</IgrAvatar>

    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.

    <IgrAvatar initials="AZ">
    <IgrIcon name="home" />
</IgrAvatar>

    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.

    <IgrAvatar initials="AZ"
           src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"
           alt="A photo of a man.">
    <IgrIcon name="home" />
</IgrAvatar>

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