Resumen de la lista de Blazor

    The Ignite UI for Blazor List element is extremely useful when presenting a group of items. You can create a simple list of textual items, or a more complex one, containing an array of different layout elements. The IgbList component displays rows of items and supports one or more headers as well. Each list item is completely templatable and will support any valid HTML or other components.

    Blazor List Example

    The following example represents a list populated with contacts with a name and a phone number properties. The IgbList component demonstrated below uses the IgbAvatar and IgbButton elements to enrich the user experience and expose the capabilities of setting avatar picture and buttons for text and call actions.

    Usage

    En esencia, el componente web de lista le permite mostrar fácilmente una lista vertical de elementos.

    Before using the IgbList, you need to register it as follows:

    // in Program.cs file

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

    You will also need to link an additional CSS file to apply the styling to the IgbList component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

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

    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

    We can use some of our other components in conjunction with the IgbList component to enrich the experience and add some functionality. We can have a nice picture avatar to the left of the name and phone values. Additionally, we can add some buttons to the right of them to allow the user to text and call contacts, so let's update our contacts list component to show the avatar and the buttons. We can do that by using some of the list item's slots.

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

    The start slot is meant to be used for adding some kind of media before all other content of our list items. The target element, in our case the IgbAvatar component, will also be provided with a default position and spacing.

    The end slot is meant to be used for list items that have some kind of action or metadata, represented, for example, by a switch, a button, a checkbox, etc. We will use IgbButton components.

    Let's also allow the user to change the size of the list using the --ig-size CSS variable. We will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the list.

    <IgbRadioGroup Alignment="@ContentOrientation.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

    The IgbList exposes several CSS parts, giving you full control over its style:

    Nombre Descripción
    start El contenedor de inicio.
    end El contenedor final.
    content El encabezado y el contenedor de contenido personalizado.
    header El contenedor de títulos y subtítulos.
    title El contenedor de títulos.
    subtitle El contenedor de subtítulos. 
    igc-list-header {
  font-size: 20px;
  font-weight: 700;
  color: var(--ig-primary-700);
}

igc-list-item::part(title) {
  font-size: 18px;
  color: var(--ig-primary-600);
}

igc-list-item::part(subtitle) {
  color: var(--ig-primary-300);
}

    In this article we covered a lot of ground with the IgbList component. First, we created a simple list with text items. Then, we created a list of contact items and added functionality to them by using some additional Ignite UI for Blazor components, like the IgbAvatar and IgbButton. Finally, we changed the component's appearance through the exposed CSS parts.

    API References

    Additional Resources