Descripción general de la lista React
El elemento List Ignite UI for React es extremadamente útil para presentar un grupo de elementos. Puedes crear una lista simple de elementos textuales o una más compleja que contenga una matriz de diferentes elementos de diseño. El componente IgrList
muestra filas de elementos y también admite uno o más encabezados. Cada elemento de la lista es completamente modificable y admitirá cualquier componente 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.
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrList, IgrListItem, IgrListHeader, IgrRadioGroup, IgrRadio, IgrAvatar, IgrButton,
IgrListModule, IgrRadioGroupModule, IgrRadioModule, IgrAvatarModule, IgrButtonModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrAvatarModule.register();
IgrButtonModule.register();
IgrListModule.register();
IgrRadioGroupModule.register();
IgrRadioModule.register();
export default class ListOverview extends React.Component <any, any> {
constructor (props: any ) {
super (props);
this .state = { listSize: "medium" };
this .onRadioChange = this .onRadioChange.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<IgrRadioGroup alignment ="horizontal" style ={{marginBottom: '10px '}}>
<IgrRadio name ="size" value ="small" labelPosition ="after" change ={this.onRadioChange} >
<span > Small</span >
</IgrRadio >
<IgrRadio name ="size" value ="medium" labelPosition ="after" checked ={true} change ={this.onRadioChange} >
<span > Medium</span >
</IgrRadio >
<IgrRadio name ="size" value ="large" labelPosition ="after" change ={this.onRadioChange} >
<span > Large</span >
</IgrRadio >
</IgrRadioGroup >
<IgrList className ={ 'size- ' + this.state.listSize }>
<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 >
</div >
);
}
public onRadioChange(e: any ) {
if (e.checked == true ) {
this .setState({ listSize: e.value });
}
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ListOverview /> );
tsx コピー .size-small {
--ig-size: var (--ig-size-small);
}
.size-medium {
--ig-size: var (--ig-size-medium);
}
.size-large {
--ig-size: var (--ig-size-large);
}
css コピー
Like this sample? Get access to our complete Ignite UI for React 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, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:
npm install igniteui-react
cmd
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();
tsx
Para obtener una introducción completa a la Ignite UI for React, lea el tema Primeros pasos .
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 >
tsx
Si todo ha ido bien deberías ver lo siguiente en tu navegador:
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrList, IgrListItem, IgrListHeader, IgrListModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrListModule.register();
export default class ListAddListItems extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<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 >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ListAddListItems /> );
tsx コピー
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 >
tsx
Después de implementar el código anterior, nuestro componente de lista ahora debería verse como el siguiente:
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrList, IgrListItem, IgrListHeader, IgrListModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrListModule.register();
export default class ListItemContent extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<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 >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ListItemContent /> );
tsx コピー
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 >
tsx
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 });
}
}
tsx
El resultado de implementar el código anterior debería verse similar al siguiente:
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrList, IgrListItem, IgrListHeader, IgrRadioGroup, IgrRadio, IgrAvatar, IgrButton,
IgrListModule, IgrRadioGroupModule, IgrRadioModule, IgrAvatarModule, IgrButtonModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrAvatarModule.register();
IgrButtonModule.register();
IgrListModule.register();
IgrRadioGroupModule.register();
IgrRadioModule.register();
export default class ListOverview extends React.Component <any, any> {
constructor (props: any ) {
super (props);
this .state = { listSize: "medium" };
this .onRadioChange = this .onRadioChange.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<IgrRadioGroup alignment ="horizontal" style ={{marginBottom: '10px '}}>
<IgrRadio name ="size" value ="small" labelPosition ="after" change ={this.onRadioChange} >
<span > Small</span >
</IgrRadio >
<IgrRadio name ="size" value ="medium" labelPosition ="after" checked ={true} change ={this.onRadioChange} >
<span > Medium</span >
</IgrRadio >
<IgrRadio name ="size" value ="large" labelPosition ="after" change ={this.onRadioChange} >
<span > Large</span >
</IgrRadio >
</IgrRadioGroup >
<IgrList className ={ 'size- ' + this.state.listSize }>
<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 >
</div >
);
}
public onRadioChange(e: any ) {
if (e.checked == true ) {
this .setState({ listSize: e.value });
}
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ListOverview /> );
tsx コピー .size-small {
--ig-size: var (--ig-size-small);
}
.size-medium {
--ig-size: var (--ig-size-medium);
}
.size-large {
--ig-size: var (--ig-size-large);
}
css コピー
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% ;
}
css
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import './ListStyling.css' ;
import { IgrList, IgrListItem, IgrListHeader, IgrAvatar, IgrButton, IgrListModule, IgrAvatarModule, IgrButtonModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrAvatarModule.register();
IgrButtonModule.register();
IgrListModule.register();
export default class ListStyling extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<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 ="contained" >
<span > Text</span >
</IgrButton >
</div >
<div slot ="end" >
<IgrButton variant ="contained" >
<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 ="contained" >
<span > Text</span >
</IgrButton >
</div >
<div slot ="end" >
<IgrButton variant ="contained" >
<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 ="contained" >
<span > Text</span >
</IgrButton >
</div >
<div slot ="end" >
<IgrButton variant ="contained" >
<span > Call</span >
</IgrButton >
</div >
</IgrListItem >
</IgrList >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ListStyling /> );
tsx コピー 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) {
--igc-secondary-500 : 230 ,48% ,47% ;
}
css コピー
En este artículo, cubrimos muchos aspectos del 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.
API References
Additional Resources