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

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

    Name Description
    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