Descripción general de la lista React

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

    React List Example

    El siguiente ejemplo representa una lista poblada con contactos con propiedades de nombre y número de teléfono. ElIgrList componente que se muestra a continuación utiliza losIgrAvatar elementos yIgrButton 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.

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Entonces tendrás que importar elIgrList CSS necesario y su contenido, así:

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

    Para una introducción completa al Ignite UI for React, lee el tema Empezar.

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

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

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

    <IgrRadioGroup alignment="horizontal" style={{marginBottom: '10px'}}>
    <IgrRadio name="size" value="small" labelPosition="after" checked={this.state.listSize === "small" } onChange={this.onRadioChange}>
        <span>Small</span>
    </IgrRadio>
    <IgrRadio name="size" value="medium" labelPosition="after" checked={this.state.listSize === "medium" } onChange={this.onRadioChange}>
        <span>Medium</span>
    </IgrRadio>
    <IgrRadio name="size" value="large" labelPosition="after" checked={ this.state.listSize === "large" } onChange={this.onRadioChange}>
        <span>Large</span>
    </IgrRadio>
</IgrRadioGroup>

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

public onRadioChange(e: any) {
    if (e.detail.checked == true) {
        this.setState({ listSize: e.detail.value });
    }
}

    El resultado de implementar el código anterior debería verse similar al siguiente:

    Styling

    ExponeIgrList 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 elIgrList 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 React, como elIgrAvatar andIgrButton. Finalmente, cambiamos la apariencia del componente a través de las piezas CSS expuestas.

    API References

    Additional Resources