Avatar Blazor
La Ignite UI for Blazor Avatar ayuda a mostrar iniciales, imágenes o íconos en su aplicación.
Blazor Icon Avatar Example
Usage
Antes de utilizar IgbAvatar
, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));
También necesitarás vincular un archivo CSS adicional para aplicar el estilo al componente IgbAvatar
. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Para obtener una introducción completa a Ignite UI for Blazor, lea el tema Introducción.
IgbAvatar
es capaz de mostrar imágenes, iniciales o cualquier otro contenido, incluidos iconos. Declarar un IgbAvatar
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 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>
Image
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>
Shape
El avatar admite tres formas: circle
, rounded
y square
. La forma predeterminada del avatar es square
y se puede cambiar mediante el atributo shape
.
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);
}
Styling
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;
}