Avatar Blazor

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

    Blazor Icon Avatar Example

    Usage

    Antes de usar o IgbAvatar, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbAvatar. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Para uma introdução completa à Ignite UI for Blazor, leia o tópico Introdução.

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

    <IgbAvatar />

    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.

    <IgbAvatar>
  <IgbIcon Name="home" />
</IgbAvatar>

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

<IgbAvatar Initials="AZ">
  <IgbIcon Name="home" />
</IgbAvatar>

    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.

    <IgbAvatar Initials="AZ"
           Src="https://static.infragistics.com/xplatform/images/people/GUY01.png"
           Alt="A photo of a man.">
  <IgbIcon Name="home" />
</IgbAvatar>

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