Blazor Avatar

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

    Ejemplo de avatar de icono Blazor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    Antes de utilizar IgbAvatar, debe registrarlo de la siguiente manera:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));
    razor

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbAvatar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

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

    Para obtener una introducción completa a la Ignite UI for Blazor, lea el tema Primeros pasos.

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

    <IgbAvatar />
    razor

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

    Iniciales

    Si se establece el atributo initials, se ignorarán todos los elementos secundarios del avatar y se mostrará la cadena pasada a este atributo.

    <!-- Initials("AZ") will be displayed instead of the icon. -->
    
    <IgbAvatar Initials="AZ">
      <IgbIcon Name="home" />
    </IgbAvatar>
    razor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Imagen

    El avatar también puede mostrar una imagen cuando al atributo src se le asigna una URL válida a un activo estático. En ese caso, se ignorará el valor initials y los elementos secundarios no se representarán.

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Forma

    El avatar admite tres formas: circle, rounded y square. La forma predeterminada del avatar es square y se puede cambiar mediante el atributo shape.

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Tamaño

    Además de la forma, el tamaño del avatar también se puede cambiar utilizando la variable CSS--ig-size. Los tamaños admitidos son small (predeterminado), medium y large. El siguiente fragmento de código muestra cómo utilizar un tamaño de componente diferente:

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Estilo

    El componente de avatar expone una parte base que se puede usar para cambiar todas sus propiedades de estilo.

    igc-avatar::part(base) {
      --size: 72px;
      color: olive;
      background: beige;
      border-radius: 20px;
    }
    css

    Referencias de API

    Recursos adicionales