Descripción general de la lista Blazor
El elemento Ignite UI for Blazor List es extremadamente útil cuando se presenta un grupo de elementos. Puede crear una lista simple de elementos textuales o una más compleja que contenga una variedad de elementos de diseño diferentes. El componente IgbList muestra filas de elementos y también admite uno o más encabezados. Cada elemento de la lista es completamente adaptable y admitirá cualquier HTML válido u otros componentes.
Blazor List Example
El siguiente ejemplo representa una lista llena de contactos con propiedades de nombre y número de teléfono. El componente IgbList que se muestra a continuación utiliza los elementos IgbAvatar e IgbButton para enriquecer la experiencia del usuario y exponer las capacidades de configurar la imagen del avatar y los botones para texto y acciones de llamada.
Usage
En esencia, el componente web de lista le permite mostrar fácilmente una lista vertical de elementos.
Antes de utilizar IgbList, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbListModule));
También necesitará vincular un archivo CSS adicional para aplicar el estilo al componente IgbList. 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.
Add List Items
Ahora podemos agregar el siguiente código para obtener una lista simple de elementos:
<IgbList>
<IgbListHeader>Header</IgbListHeader>
<IgbListItem>
<h2 slot="title">Item 1</h2>
</IgbListItem>
<IgbListItem>
<h2 slot="title">Item 2</h2>
</IgbListItem>
<IgbListItem>
<h2 slot="title">Item 3</h2>
</IgbListItem>
</IgbList>
Si todo ha ido bien deberías ver lo siguiente en tu navegador:
Mejoremos un poco nuestro juego y mejoremos los elementos de nuestra lista. Digamos que queremos crear una lista de contactos con un nombre y un número de teléfono debajo del nombre. Para lograrlo, podemos usar algunas de las ranuras que vienen con los elementos de la lista, como se muestra en el siguiente ejemplo:
<IgbList>
<IgbListHeader>
<h1>Contacts</h1>
</IgbListHeader>
<IgbListItem>
<h2 slot="title">Terrance Orta</h2>
<span slot="subtitle">770-504-2217</span>
</IgbListItem>
<IgbListItem>
<h2 slot="title">Richard Mahoney</h2>
<span slot="subtitle">423-676-2869</span>
</IgbListItem>
<IgbListItem>
<h2 slot="title">Donna Price</h2>
<span slot="subtitle">859-496-2817</span>
</IgbListItem>
</IgbList>
Después de implementar el código anterior, nuestro componente de lista ahora debería verse como el siguiente:
Adding Avatar and Buttons
Podemos usar algunos de nuestros otros componentes junto con el componente IgbList para enriquecer la experiencia y agregar algunas funciones. Podemos tener una bonita imagen de avatar a la izquierda del nombre y los valores del teléfono. Además, podemos agregar algunos botones a la derecha de ellos para permitir al usuario enviar mensajes de texto y llamar a sus contactos, así que actualicemos nuestro componente de lista de contactos para mostrar el avatar y los botones. Podemos hacerlo usando algunas de las ranuras del elemento de la lista.
<IgbList>
<IgbListHeader>
<h1>Contacts</h1>
</IgbListHeader>
<IgbListItem>
<IgbAvatar slot="start" src="https://static.infragistics.com/xplatform/images/avatars/8.jpg" Shape="@AvatarShape.Circle"/>
<h2 slot="title">Terrance Orta</h2>
<span slot="subtitle">770-504-2217</span>
<IgbButton slot="end" Variant="@ButtonVariant.Outlined">Text</IgbButton>
<IgbButton slot="end" Variant="@ButtonVariant.Outlined">Call</IgbButton>
</IgbListItem>
<IgbListItem>
<IgbAvatar slot="start" src="https://static.infragistics.com/xplatform/images/avatars/17.jpg" Shape="@AvatarShape.Circle"/>
<h2 slot="title">Richard Mahoney</h2>
<span slot="subtitle">423-676-2869</span>
<IgbButton slot="end" Variant="@ButtonVariant.Outlined">Text</IgbButton>
<IgbButton slot="end" Variant="@ButtonVariant.Outlined">Call</IgbButton>
</IgbListItem>
<IgbListItem>
<IgbAvatar slot="start" src="https://static.infragistics.com/xplatform/images/avatars/9.jpg" Shape="@AvatarShape.Circle"/>
<h2 slot="title">Donna Price</h2>
<span slot="subtitle">859-496-2817</span>
<IgbButton slot="end" Variant="@ButtonVariant.Outlined">Text</IgbButton>
<IgbButton slot="end" Variant="@ButtonVariant.Outlined">Call</IgbButton>
</IgbListItem>
</IgbList>
El espacio start está destinado a usarse para agregar algún tipo de medio antes que el resto del contenido de los elementos de nuestra lista. El elemento de destino, en nuestro caso el componente IgbAvatar, también recibirá una posición y un espaciado predeterminados.
La ranura end está destinada a usarse para elementos de la lista que tienen algún tipo de acción o metadatos, representados, por ejemplo, por un interruptor, un botón, una casilla de verificación, etc. Usaremos componentes IgbButton.
También permitamos al usuario cambiar el tamaño de la lista usando la variable CSS--ig-size. Agregaremos algunos botones de opción para mostrar todos los valores de tamaño. De esta manera cada vez que se seleccione uno, cambiaremos el tamaño de la lista.
<IgbRadioGroup Alignment="@RadioGroupAlignment.Horizontal">
<IgbRadio Value="Small" label-position="after" Change="OnRadioOptionClick">Small</IgbRadio>
<IgbRadio Value="Medium" label-position="after" Change="OnRadioOptionClick">Medium</IgbRadio>
<IgbRadio Value="Large" label-position="after" Checked="true" Change="OnRadioOptionClick">Large</IgbRadio>
</IgbRadioGroup>
<IgbList style="margin-top: 10px;" Size="@ListSize" />
@code {
public SizableComponentSize ListSize { get; set; }
public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs e)
{
IgbRadio radio = e.Parent as IgbRadio;
switch (radio.Value)
{
case "Small":
{
this.ListSize = SizableComponentSize.Small;
break;
}
case "Medium":
{
this.ListSize = SizableComponentSize.Medium;
break;
}
case "Large":
{
this.ListSize = SizableComponentSize.Large;
break;
}
}
}
}
El resultado de implementar el código anterior debería verse similar al siguiente:
Styling
Puede cambiar la apariencia de nuestra lista utilizando algunas de las partes CSS expuestas: title, subtitle y end.
igc-list-header {
font-size: 20px;
font-weight: 700;
color: #3f51b5;
}
igc-list-item::part(title) {
font-size: 18px;
color: #3f51b5;
}
igc-list-item::part(subtitle) {
color: #0099ff;
}
igc-list-item::part(end) {
--ig-secondary-500: 230,48%,47%;
}
En este artículo cubrimos mucho terreno con el componente IgbList. Primero, creamos una lista simple con elementos de texto. Luego, creamos una lista de elementos de contacto y les agregamos funcionalidad mediante el uso de algunos componentes adicionales Ignite UI for Blazor, como IgbAvatar e IgbButton. Finalmente, cambiamos la apariencia del componente a través de las partes CSS expuestas.