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 usá-losIgbAvatar, você precisa registrá-los 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 aoIgbAvatar componente. O seguinte deve 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 ao Ignite UI for Blazor, leia o tópico Comecando.

    EleIgbAvatar é capaz de exibir imagens, iniciais ou qualquer outro conteúdo, incluindo ícones. Declarar umIgbAvatar é 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 oInitials atributo for 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 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.

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

    OIgbAvatar 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