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

    Você então precisará importar oIgrAvatar CSS necessário e o necessário, assim:

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

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

    EleIgrAvatar é capaz de exibir imagens, iniciais ou qualquer outro conteúdo, incluindo ícones. Declarar umIgrAvatar é 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 oinitials atributo for 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 osrc atributo recebe uma URL válida para um ativo estático. Nesse caso, oinitials valor 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, esquare. A forma padrão do avatar ésquare e pode ser alterada via oshape atributo.

    Tamanho

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

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

    Styling

    OIgrAvatar componente expõe várias partes do CSS, dando 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