Resumen de la lista de Blazor

    El elemento Ignite UI for Blazor Lista es extremadamente útil al presentar un grupo de elementos. Puedes crear una lista sencilla de elementos textuales, o una más compleja, que contenga una variedad de diferentes elementos de diseño. ElIgbList componente muestra filas de elementos y también soporta uno o más encabezados. Cada elemento de la lista es completamente templacionable y soportará cualquier HTML válido u otros componentes.

    Blazor List Example

    El siguiente ejemplo representa una lista poblada con contactos con propiedades de nombre y número de teléfono. ElIgbList componente que se muestra a continuación utiliza losIgbAvatar elementos yIgbButton para enriquecer la experiencia del usuario y exponer las capacidades de configurar la imagen del avatar y los botones para acciones de texto y llamadas.

    Usage

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

    Antes de usarlosIgbList, debes registrarlo de la siguiente manera:

    // in Program.cs file

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

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbList 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.

    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 elIgbList componente para enriquecer la experiencia y añadir funcionalidad. Podemos tener un bonito avatar con foto a la izquierda del nombre y los valores del teléfono. Además, podemos añadir algunos botones a la derecha para permitir que el usuario envíe mensajes de texto y llame a contactos, así que actualicemos nuestro componente de lista de contactos para mostrar el avatar y los botones. Podemos hacerlo usando algunos de los espacios de los elementos 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>

    Lastart ranura está pensada para añadir algún tipo de contenido antes de cualquier otro contenido de nuestra lista. El elemento objetivo, en nuestro caso elIgbAvatar componente, también tendrá una posición y un espacio por defecto.

    Laend ranura está pensada para usarse en elementos de lista que tienen algún tipo de acción o metadato, representados, por ejemplo, por un interruptor, un botón, una casilla de verificación, etc. UsaremosIgbButton componentes.

    También permitamos al usuario cambiar el tamaño de la lista usando la--ig-size variable CSS. Añadiremos algunos botones de radio para mostrar todos los valores de tamaño. Así, cada vez que se seleccione uno, cambiaremos el tamaño de la lista.

    <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

    ExponeIgbList varias partes de CSS, dándote control total sobre su estilo:

    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);
}

    En este artículo hemos tratado muchos temas con elIgbList componente. Primero, creamos una lista sencilla con elementos de texto. Luego, creamos una lista de elementos de contacto y añadimos funcionalidad usando algunos componentes adicionales de Ignite UI for Blazor, como elIgbAvatar andIgbButton. Finalmente, cambiamos la apariencia del componente a través de las piezas CSS expuestas.

    API References

    Additional Resources