Descripción general de la lista Web Components

El elemento Lista Ignite UI for Web Components 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 IgcListComponent 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.

Web Components List Example

El siguiente ejemplo representa una lista llena de contactos con propiedades de nombre y número de teléfono. El componente IgcListComponent que se muestra a continuación utiliza los elementos IgcAvatarComponent e IgcButtonComponent 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.

Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents

import { defineComponents, IgcListComponent } from 'igniteui-webcomponents';

defineComponents(IgcListComponent);

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

Add List Items

Ahora podemos agregar el siguiente código para obtener una lista simple de elementos:

    <igc-list>
        <igc-list-header>Header</igc-list-header>
        <igc-list-item>
            <h2 slot="title">Item 1</h2>
        </igc-list-item>
        <igc-list-item>
            <h2 slot="title">Item 2</h2>
        </igc-list-item>
        <igc-list-item>
            <h2 slot="title">Item 3</h2>
        </igc-list-item>
    </igc-list>

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:

<igc-list>
    <igc-list-header>
        <h1>Contacts</h1>
    </igc-list-header>
    <igc-list-item>
        <h2 slot="title">Terrance Orta</h2>
        <span slot="subtitle">770-504-2217</span>
    </igc-list-item>
    <igc-list-item>
        <h2 slot="title">Richard Mahoney</h2>
        <span slot="subtitle">423-676-2869</span>
    </igc-list-item>
    <igc-list-item>
        <h2 slot="title">Donna Price</h2>
        <span slot="subtitle">859-496-2817</span>
    </igc-list-item>
</igc-list>

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

    <igc-list>
        <igc-list-header>
            <h1>Job Positions</h1>
        </igc-list-header>
        <igc-list-item>
            <igc-avatar slot="start" src="https://randomuser.me/api/portraits/men/27.jpg" shape="circle">
                AA
            </igc-avatar>
            <h2 slot="title">Terrance Orta</h2>
            <span slot="subtitle">770-504-2217</span>
            <igc-button slot="end" variant="outlined">
                Text
            </igc-button>
            <igc-button slot="end" variant="outlined">
                Call
            </igc-button>
        </igc-list-item>
        <igc-list-item>
            <igc-avatar slot="start" src="https://randomuser.me/api/portraits/men/1.jpg" shape="circle">
                AA
            </igc-avatar>
            <h2 slot="title">Richard Mahoney</h2>
            <span slot="subtitle">423-676-2869</span>
            <igc-button slot="end" variant="outlined">
                Text
            </igc-button>
            <igc-button slot="end" variant="outlined">
                Call
            </igc-button>
        </igc-list-item>
        <igc-list-item>
            <igc-avatar slot="start" src="https://randomuser.me/api/portraits/women/50.jpg" shape="circle">
                AA
            </igc-avatar>
            <h2 slot="title">Donna Price</h2>
            <span slot="subtitle">859-496-2817</span>
            <igc-button slot="end" variant="outlined">
                Text
            </igc-button>
            <igc-button slot="end" variant="outlined">
                Call
            </igc-button>
        </igc-list-item>
    </igc-list>

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 IgcAvatarComponent, 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 IgcButtonComponent.

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.

<igc-radio-group id="radio-group" alignment="horizontal">
    <igc-radio name="size" value="small" label-position="after">Small</igc-radio>
    <igc-radio name="size" value="medium" label-position="after">Medium</igc-radio>
    <igc-radio name="size" value="large" label-position="after" checked>Large</igc-radio>
</igc-radio-group>

this.list = document.getElementById('list') as IgcListComponent;
this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;

this.radioGroup.addEventListener('click', (radio: any) => {
    this.list.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
});

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 IgcListComponent. 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 Web Components, como IgcAvatarComponent e IgcButtonComponent. Finalmente, cambiamos la apariencia del componente a través de las partes CSS expuestas.