Blazor Avatar

    El Ignite UI for Blazor Avatar ayuda a mostrar iniciales, imágenes o iconos en la aplicación.

    Blazor Icon Avatar Example

    Usage

    Antes de usarlosIgbAvatar, debes registrarlo de la siguiente manera:

    // in Program.cs file

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

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbAvatar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

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

    Para una introducción completa al Ignite UI for Blazor, lee el tema Empezar.

    EsIgbAvatar capaz de mostrar imágenes, iniciales o cualquier otro contenido, incluidos iconos. Declarar unIgbAvatar es tan simple como:

    <IgbAvatar />

    El avatar tiene varios atributos que permiten representar contenido diferente según el contexto. La forma más básica de mostrar contenido dentro de los límites del avatar es proporcionar contenido entre las etiquetas de apertura y cierre.

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

    Initials

    Si elInitials atributo está establecido, todos los elementos hijos del avatar serán ignorados y se mostrará la cadena que se pasa a este atributo.

    <!-- Initials("AZ") will be displayed instead of the icon. -->

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

    Image

    El avatar también puede mostrar una imagen cuando elSrc atributo recibe una URL válida para un activo estático. En ese caso, elInitials valor será ignorado y los elementos hijos no se renderizarán.

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

    Shape

    El avatar soporta tres formas -circle,rounded, ysquare. La forma predeterminada del avatar essquare y puede cambiarse mediante elshape atributo.

    Tamaño

    Además de la forma, el tamaño del avatar también puede cambiarse utilizando la--ig-size variable CSS. Los tamaños soportados sonsmall (por defecto),medium ylarge. El siguiente fragmento de código muestra cómo usar un tamaño de componente diferente:

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

    Styling

    ElIgbAvatar componente expone varias partes CSS, dándote control total sobre su estilo:

    Nombre Descripción
    base El envoltorio base del avatar.
    initials El envoltorio de iniciales del avatar.
    image El envoltorio de imagen del avatar.
    icon El envoltorio de iconos del 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