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.
<!DOCTYPE html><html><head><title>List Overview</title><metacharset="UTF-8" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /><linkhref="https://static.infragistics.com/xplatform/css/samples/custom-legend.css"rel="stylesheet"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radio-groupid="radio-group"alignment="horizontal"style="margin-bottom: 10px;"><igc-radioname="size"value="small"label-position="after">Small</igc-radio><igc-radioname="size"value="medium"label-position="after"checked >Medium</igc-radio><igc-radioname="size"value="large"label-position="after">Large</igc-radio></igc-radio-group><igc-listid="list"><igc-list-header><h1>Contacts</h1></igc-list-header><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/8.jpg"shape="circle">AA</igc-avatar><h2slot="title">Terrance Orta</h2><spanslot="subtitle">770-504-2217</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/17.jpg"shape="circle">AA</igc-avatar><h2slot="title">Richard Mahoney</h2><spanslot="subtitle">423-676-2869</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/9.jpg"shape="circle">AA</igc-avatar><h2slot="title">Donna Price</h2><spanslot="subtitle">859-496-2817</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item></igc-list></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
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:
<!DOCTYPE html><html><head><title>Add List Items</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-listid="list"><igc-list-header>Header</igc-list-header><igc-list-item><h2slot="title">Item 1</h2></igc-list-item><igc-list-item><h2slot="title">Item 2</h2></igc-list-item><igc-list-item><h2slot="title">Item 3</h2></igc-list-item></igc-list></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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:
<!DOCTYPE html><html><head><title>List Item Content</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-list><igc-list-header><h1>Contacts</h1></igc-list-header><igc-list-item><h2slot="title">Terrance Orta</h2><spanslot="subtitle">770-504-2217</span></igc-list-item><igc-list-item><h2slot="title">Richard Mahoney</h2><spanslot="subtitle">423-676-2869</span></igc-list-item><igc-list-item><h2slot="title">Donna Price</h2><spanslot="subtitle">859-496-2817</span></igc-list-item></igc-list></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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-avatarslot="start"src="https://randomuser.me/api/portraits/men/27.jpg"shape="circle">
AA
</igc-avatar><h2slot="title">Terrance Orta</h2><spanslot="subtitle">770-504-2217</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://randomuser.me/api/portraits/men/1.jpg"shape="circle">
AA
</igc-avatar><h2slot="title">Richard Mahoney</h2><spanslot="subtitle">423-676-2869</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://randomuser.me/api/portraits/women/50.jpg"shape="circle">
AA
</igc-avatar><h2slot="title">Donna Price</h2><spanslot="subtitle">859-496-2817</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item></igc-list>html
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.
<!DOCTYPE html><html><head><title>List Overview</title><metacharset="UTF-8" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /><linkhref="https://static.infragistics.com/xplatform/css/samples/custom-legend.css"rel="stylesheet"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radio-groupid="radio-group"alignment="horizontal"style="margin-bottom: 10px;"><igc-radioname="size"value="small"label-position="after">Small</igc-radio><igc-radioname="size"value="medium"label-position="after"checked >Medium</igc-radio><igc-radioname="size"value="large"label-position="after">Large</igc-radio></igc-radio-group><igc-listid="list"><igc-list-header><h1>Contacts</h1></igc-list-header><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/8.jpg"shape="circle">AA</igc-avatar><h2slot="title">Terrance Orta</h2><spanslot="subtitle">770-504-2217</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/17.jpg"shape="circle">AA</igc-avatar><h2slot="title">Richard Mahoney</h2><spanslot="subtitle">423-676-2869</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/9.jpg"shape="circle">AA</igc-avatar><h2slot="title">Donna Price</h2><spanslot="subtitle">859-496-2817</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item></igc-list></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Styling
Puede cambiar la apariencia de nuestra lista utilizando algunas de las partes CSS expuestas: title, subtitle y end.
<!DOCTYPE html><html><head><title>List Styling</title><metacharset="UTF-8" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /><linkhref="https://static.infragistics.com/xplatform/css/samples/custom-legend.css"rel="stylesheet"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-list><igc-list-header><h1>Contacts</h1></igc-list-header><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/8.jpg"shape="circle">AA</igc-avatar><h2slot="title">Terrance Orta</h2><spanslot="subtitle">770-504-2217</span><igc-buttonslot="end"variant="contained">
Text
</igc-button><igc-buttonslot="end"variant="contained">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/17.jpg"shape="circle">AA</igc-avatar><h2slot="title">Richard Mahoney</h2><spanslot="subtitle">423-676-2869</span><igc-buttonslot="end"variant="contained">
Text
</igc-button><igc-buttonslot="end"variant="contained">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/9.jpg"shape="circle">AA</igc-avatar><h2slot="title">Donna Price</h2><spanslot="subtitle">859-496-2817</span><igc-buttonslot="end"variant="contained">
Text
</igc-button><igc-buttonslot="end"variant="contained">
Call
</igc-button></igc-list-item></igc-list></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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.