Descripción general de la lista React

El elemento Ignite UI for React 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 IgrList 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.

React List Example

El siguiente ejemplo representa una lista llena de contactos con propiedades de nombre y número de teléfono. El componente IgrList que se muestra a continuación utiliza los elementos IgrAvatar e IgrButton 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 el paquete Ignite UI for React npm correspondiente ejecutando el siguiente comando:

npm install igniteui-react

Luego necesitarás importar IgrList, su CSS necesario y registrar su módulo, así:

import { IgrListModule, IgrList, IgrListHeader, IgrListItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrListModule.register();

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

Add List Items

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

<IgrList>
    <IgrListHeader>
        <span>Header</span>
    </IgrListHeader>
    <IgrListItem>
        <h2 slot="title">Item 1</h2>
    </IgrListItem>
    <IgrListItem>
        <h2 slot="title">Item 2</h2>
    </IgrListItem>
    <IgrListItem>
        <h2 slot="title">Item 3</h2>
    </IgrListItem>
</IgrList>

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:

<IgrList>
    <IgrListHeader>
        <span>Contacts</span>
    </IgrListHeader>
    <IgrListItem>
        <h2 slot="title">Terrance Orta</h2>
        <span slot="subtitle">770-504-2217</span>
    </IgrListItem>
    <IgrListItem>
        <h2 slot="title">Richard Mahoney</h2>
        <span slot="subtitle">423-676-2869</span>
    </IgrListItem>
    <IgrListItem>
        <h2 slot="title">Donna Price</h2>
        <span slot="subtitle">859-496-2817</span>
    </IgrListItem>
</IgrList>

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

<IgrList>
    <IgrListHeader>
        <span>Contacts</span>
    </IgrListHeader>
    <IgrListItem>
        <div slot="start">
            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/8.jpg" shape="circle" />
        </div>
        <h2 slot="title">Terrance Orta</h2>
        <span slot="subtitle">770-504-2217</span>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Text</span>
            </IgrButton>
        </div>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Call</span>
            </IgrButton>
        </div>
    </IgrListItem>
    <IgrListItem>
        <div slot="start">
            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/17.jpg" shape="circle" />
        </div>
        <h2 slot="title">Richard Mahoney</h2>
        <span slot="subtitle">423-676-2869</span>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Text</span>
            </IgrButton>
        </div>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Call</span>
            </IgrButton>
        </div>
    </IgrListItem>
    <IgrListItem>
        <div slot="start">
            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/9.jpg" shape="circle" />
        </div>
        <h2 slot="title">Donna Price</h2>
        <span slot="subtitle">859-496-2817</span>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Text</span>
            </IgrButton>
        </div>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Call</span>
            </IgrButton>
        </div>
    </IgrListItem>
</IgrList>

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 IgrAvatar, 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 IgrButton.

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.

<IgrRadioGroup alignment="horizontal">
    <IgrRadio value="small" labelPosition="after" change={this.onRadioChange}>
        <span>Small</span>
    </IgrRadio>
    <IgrRadio value="medium" labelPosition="after" change={this.onRadioChange}>
        <span>Medium</span>
    </IgrRadio>
    <IgrRadio value="large" labelPosition="after" checked={true} change={this.onRadioChange}>
        <span>Large</span>
    </IgrRadio>
</IgrRadioGroup>

<IgrList size={this.state.listSize} />

public onRadioChange(e: any) {
    if (e.checked == true) {
        this.setState({ listSize: e.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 IgrList. 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 React, como IgrAvatar e IgrButton. Finalmente, cambiamos la apariencia del componente a través de las partes CSS expuestas.