Angular Descripción general del componente de vista de lista

El componente Ignite UI for Angular Lista muestra filas de elementos y soporta uno o más elementos de cabecera, así como búsqueda y filtrado de elementos de lista. Cada elemento de la lista es completamente templacionable y soporta cualquier componente HTML o Angular válido. El componente de listas también proporciona funcionalidad de paneo integrada, plantillas para estados vacíos y de carga, y soporta virtualización para listas grandes usando laIgxForOf directiva.

Angular List Example

El siguiente ejemplo representa una lista poblada con contactos con propiedades de nombre y número de teléfono. ElIgxList componente utilizaigx-avatar yigx-icon enriquece la experiencia del usuario y expone las capacidades de configurar la imagen del avatar y otros iconos para un contacto favorito. Además, la Vista de Lista expone las capacidades de ordenación obtenidas mediante nuestro filtro de tubería.

Getting Started with Ignite UI for Angular List

Para comenzar con el componente Vista de lista de Ignite UI for Angular, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar elIgxListModule archivo en el app.module.ts.

Note

Este componente puede utilizar elHammerModule opcional. Puede importarse en el módulo raíz de la aplicación para que las interacciones táctiles funcionen como se espera.

// app.module.ts

import { HammerModule } from '@angular/platform-browser';
import { IgxListModule } from 'igniteui-angular/list';
// import { IgxListModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxListModule, HammerModule],
    ...
})
export class AppModule {}

Alternativamente,16.0.0 puedes importarlosIgxListComponent como una dependencia independiente, o usar elIGX_LIST_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
// import { IGX_LIST_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-list>
        <igx-list-item isHeader="true">Header</igx-list-item>
        <igx-list-item>Item 1</igx-list-item>
        <igx-list-item>Item 2</igx-list-item>
        <igx-list-item>Item 3</igx-list-item>
    </igx-list>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_LIST_DIRECTIVES, HammerModule]
    /* or imports: [IgxListComponent, IgxListItemComponent, HammerModule] */
})
export class HomeComponent {}

Ahora que tienes importado el módulo o directivas Ignite UI for Angular List, puedes empezar a usar eligx-list componente.

Using the Angular List

Luego, en la plantilla de nuestro componente de contactos podemos crear nuestra lista, pero ¿y si actualmente (o en algún momento futuro) no tenemos elementos en ella? En este caso, la lista de Angular nos proporciona una plantilla predeterminada que se usa cuando la lista está vacía. Siempre podemos proporcionar nuestra propia plantilla para el aspecto de nuestra lista vacía simplemente usando laigxEmptyList directiva. En este caso, no se utilizará la plantilla predeterminada:

<!--contacts.component.html-->

<igx-list>
    <ng-template igxEmptyList>
        <p class="empty">No contacts! :(</p>
    </ng-template>
</igx-list>

Y nuestro estilo para la plantilla vacía:

/* contacts.component.css */

.empty {
    color: rgba(0, 153, 255, 1);
    font-size: 25px;
    font-weight: 600;
    text-shadow: 2px 1px 2px rgba(150, 150, 150, 1);
}

Si todo salió bien, así es como debería verse nuestra lista vacía:

A veces puede haber un retraso en la carga de tus datos. En este caso, puedes establecer la propiedad deisLoading la lista entrue y una plantilla predeterminada informará al usuario sobre el proceso de carga de datos en curso. También puedes proporcionar tu propia plantilla de carga usando laigxDataLoading directiva:

<!--contacts.component.html-->

<igx-list>
    <ng-template igxDataLoading>
        <p class="loading">Patience, we are currently loading your data...</p>
    </ng-template>
</igx-list>

/* contacts.component.css */

.loading {
    color: rgba(255, 153, 0, 1);
    font-size: 25px;
    font-weight: 600;
    text-shadow: 2px 1px 2px rgba(150, 150, 150, 1);
}

Add List Items

Es bueno tener una plantilla para cuando la lista esté vacía, ¡pero ahora agreguemos algunos elementos! Podemos agregar el siguiente código para obtener una lista simple de elementos:

<!--contacts.component.html-->

<igx-list>
    <igx-list-item isHeader="true">Header</igx-list-item>
    <igx-list-item>Item 1</igx-list-item>
    <igx-list-item>Item 2</igx-list-item>
    <igx-list-item>Item 3</igx-list-item>
</igx-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. Supongamos que queremos crear una lista Angular de contactos con un nombre y un número de teléfono debajo del nombre. En nuestro archivo typescript de componentes podemos definir una lista de contactos:

// contacts.component.ts
...
public contacts = [{
    name: "Terrance Orta",
    phone: "770-504-2217"
}, {
    name: "Richard Mahoney",
    phone: "423-676-2869"
}, {
    name: "Donna Price",
    phone: "859-496-2817"
}, {
    name: "Lisa Landers",
    phone: "901-747-3428"
}, {
    name: "Dorothy H. Spencer",
    phone: "573-394-9254"
}];

Ahora que tenemos algunos datos que queremos representar, configuremos algunas marcas. Si queremos algo de estilo listo para usar, podemos usar algunas de las directivas que vienen con los elementos de la lista.

Veamos cómo podemos usar algunos de ellos en el siguiente ejemplo:

<!--contacts.component.html-->

<igx-list>
  <igx-list-item isHeader="true">
    Contacts
  </igx-list-item>
  <igx-list-item *ngFor="let contact of contacts">
    <h4 igxListLineTitle>{{ contact.name }}</h4>
    <p igxListLineSubTitle>{{ contact.phone }}</p>
  </igx-list-item>
</igx-list>

Ambas directivasigxListLineTitle yigxListLineSubTitle dan a nuestros elementos de lista un aspecto predeterminado.

Después de todo eso, nuestra lista de Angular ahora debería verse así:

Adding Avatar and Icons

Podemos usar algunos de nuestros otros componentes junto con elIgxList 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 un icono de estrella a la derecha para que el usuario pueda marcar un contacto como favorito. Para ello, vamos a coger los módulos IgxAvatar e IgxIcon e importarlos en nuestro archivo app.module.ts.

// app.module.ts

...
import { IgxListModule } from 'igniteui-angular/list';
import { IgxAvatarModule } from 'igniteui-angular/avatar';
import { IgxIconModule } from 'igniteui-angular/icon';
// import { IgxListModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxAvatarModule, IgxIconModule],
})
export class AppModule {}

A continuación, necesitamos añadir más información a nuestro objeto de contacto, como unaphoto fuente para nuestro avatar y unaisFavorite propiedad para indicar el estado favorito del contacto.

// contacts.component.ts

public contacts = [{
    name: 'Terrance Orta',
    phone: '770-504-2217',
    photo: 'https://randomuser.me/api/portraits/men/27.jpg',
    isFavorite: false
}, {
    name: 'Richard Mahoney',
    phone: '423-676-2869',
    photo: 'https://randomuser.me/api/portraits/men/1.jpg',
    isFavorite: true
}, {
    name: 'Donna Price',
    phone: '859-496-2817',
    photo: 'https://randomuser.me/api/portraits/women/50.jpg',
    isFavorite: false
}, {
    name: 'Lisa Landers',
    phone: '901-747-3428',
    photo: 'https://randomuser.me/api/portraits/women/3.jpg',
    isFavorite: false
}, {
    name: 'Dorothy H. Spencer',
    phone: '573-394-9254',
    photo: 'https://randomuser.me/api/portraits/women/67.jpg',
    isFavorite: true
}];

Genial, ahora actualicemos la plantilla de nuestra lista de contactos para mostrar el avatar y el ícono. Nuevamente podemos hacerlo usando algunas de las directivas de lista.

<!--contacts.component.html-->

<igx-list>
  <igx-list-item isHeader="true">
    Contacts
  </igx-list-item>
  <igx-list-item #item *ngFor="let contact of contacts;">
      <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
      <h4 igxListLineTitle>{{ contact.name }}</h4>
      <p igxListLineSubTitle class="phone">{{ contact.phone }}</p>
      <span igxListLine>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, laborum.</span>
      <igx-icon igxListAction [color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon>
  </igx-list-item>
</igx-list>

igxListThumbnailestá pensado para usarse si necesitamos añadir algún tipo de medio al principio de los elementos de nuestra lista. La directiva envolverá el elemento objetivo en nuestro caso igx-avatar en un contenedor que proporcionará cierta posición y espacio por defecto.
igxListActionestá pensado para usarse en elementos de lista que tienen algún tipo de acción o metadato, por ejemplo, interruptor, botón de radio, casilla de verificación, etc. En nuestro caso, la acción será representada por unigx-icon. De nuevo, la directiva envolverá el elemento objetivo en un contenedor que tendrá la posición y el espacio correctos.
igxListLineestá pensado para usarse si necesitamos algo de texto intermedioigxListThumbnail yigxListAction la directiva asegurará que la posición, el espaciado y la alineación del texto se vean bien con las otras dos directivas disponibles.

A continuación, escuchamos un evento de clic en el componente IgxIcon para alternar la propiedad isFavorite en nuestro objeto de contacto.

// contacts.component.ts

...
toggleFavorite(item: IgxListItem) {
    const contact = this.contacts[item.index - 1];
    contact.isFavorite = !contact.isFavorite;
}

También permitamos al usuario elegir el tamaño de la lista usando la--ig-size propiedad personalizada CSS. Lo haremos importando elIgxButtonGroupModule y usando el IgxButtonGroup para mostrar todos los valores de tamaño. Así, cada vez que se seleccione uno, actualizaremos el tamaño de la lista.

// app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [..., IgxButtonGroupModule]
})

<!--contacts.component.html-->

<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
...
<igx-list>
    ...
</igx-list>

// contacts.component.ts

public size = 'large';
public sizes;

public ngOnInit() {
    this.sizes = [
        { label: 'large', selected: this.size === 'large', togglable: true },
        { label: 'medium', selected: this.size === 'medium', togglable: true },
        { label: 'small', selected: this.size === 'small', togglable: true }
    ];
}

public selectSize(event: any) {
    this.size = this.sizes[event.index].label;
}


@HostBinding('style.--ig-size')
protected get sizeStyle() {
    return `var(--ig-size-${this.size})`;
}

Y aquí está el resultado de todo ese trabajo:

List Items Panning

Ahora que tenemos una lista de Angular tan bonita con contactos y sus números de teléfono, ¿por qué no implementamos la opción de llamar a un contacto? TieneIgxList la solución perfecta para esto: el panorameo de los elementos de lista. Para ello tienes que implementar los siguientes pasos:

Activa el paneo usando lasallowLeftPanning propiedades y/oallowRightPanning
Definir plantillas para la panorámica izquierda y/o derecha
Manejar los eventos de panorámica del elemento de la lista y realizar la acción deseada

El siguiente ejemplo demuestra cómo manejar tanto el panorameo izquierdo como derecho. El gestor de eventos para el panorameo hacia la derecha muestra un mensaje de brindis. El gestor de eventos para el panorameo izquierdo elimina un elemento de laIgxList.

Note

Ten en cuenta que la eliminación de elementos de la lista es una tarea de solicitud. ElIgxList propio no puede eliminar elementos de la fuente de datos porqueIgxList no tiene referencia a la fuente.

Aquí está el código HTML del ejemplo:

<!-- contacts.component.html -->

<igx-list [allowLeftPanning]="true" [allowRightPanning]="true"
  (leftPan)="leftPanPerformed($event)" (rightPan)="rightPanPerformed($event)">
  <ng-template igxListItemLeftPanning>
    <div class="listItemLeftPanningStyle">
      <igx-icon [color]="white" style="margin-left:10px">delete</igx-icon>Delete
    </div>
  </ng-template>
  <ng-template igxListItemRightPanning>
    <div class="listItemRightPanningStyle">
      <igx-icon [color]="white" style="margin-right:10px">call</igx-icon>Dial
    </div>
  </ng-template>
  <igx-list-item isHeader="true">Contacts</igx-list-item>
  <igx-list-item #item *ngFor="let contact of contacts">
    <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
    <h4 igxListLineTitle>{{ contact.name }}</h4>
    <p igxListLineSubTitle class="phone">{{ contact.phone }}</p>
    <igx-icon igxListAction [color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon>
  </igx-list-item>
</igx-list>

<igx-toast #toast></igx-toast>

El ejemplo anterior utiliza algunos estilos CSS que se pueden encontrar aquí:

/* contacts.component.css */

igx-icon {
    cursor: pointer;
    user-select: none;
}

.listItemLeftPanningStyle {
    display: flex;
    flex-direction: row-reverse;
    background-color:orange;
    color: white;
    width: 100%;
    padding-right: 10px;
    align-items: center;
}

.listItemRightPanningStyle {
    display: flex;
    flex-direction: row;
    background-color:limegreen;
    color: white;
    width: 100%;
    padding-left: 10px;
    align-items: center;
}

Y finalmente aquí está el código mecanografiado que maneja los eventos de panorámica:

// contacts.component.ts

...
@ViewChild('toast')
public toast: IgxToastComponent;

public rightPanPerformed(args) {
  args.keepItem = true;
  this.toast.message = 'Dialing ' + this.contacts[args.item.index - 1].name;
  this.toast.open();
}

public leftPanPerformed(args) {
  args.keepItem = false;
  setTimeout((idx = args.item.index - 1) => {
    this.toast.message = 'Contact ' + this.contacts[idx].name + ' removed.';
    this.toast.open();
    this.contacts.splice(idx, 1);
  }, 500);
}

...

Note

Al panear los elementos de la lista hay un umbral que debe alcanzarse para que se emitan los eventos de paneo. Puedes cambiar el umbral usando la propiedad deIgxList thepanEndTriggeringThreshold. Por defecto, esta propiedad tiene un valor de 0,5, lo que significa el 50% del ancho del elemento de lista.

Ahora intente desplazarse por los elementos de la lista usted mismo:

Nuestra lista se ve bien, pero ¿no sería aún mejor si pudiéramos buscar contactos por nombre? Esto lo podemos lograr fácilmente utilizando nuestro tubo filtrante. Hagámoslo.

Agreguemos primero un campo de entrada a la parte superior de nuestra plantilla de componente Angular y vinculémoslo a una propiedad de nuestro componente llamada searchContact:

<!--contacts.component.html-->

<igx-input-group type="search" class="search">
    <igx-prefix>
        <igx-icon>search</igx-icon>
    </igx-prefix>
    <input #search igxInput placeholder="Search Contacts" [(ngModel)]="searchContact">
    <igx-suffix *ngIf="search.value.length > 0" (click)="searchContact = null">
        <igx-icon>clear</igx-icon>
    </igx-suffix>
</igx-input-group>

Es hora de importar elIgxFilterModule y elIgxInputGroupModule en nuestro archivo de app.module.ts yIgxFilterOptions en nuestro componente de contactos:

// app.module.ts
...
import { IgxFilterModule } from 'igniteui-angular/directives';
import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxFilterModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [..., IgxFilterModule, IgxInputGroupModule]
})

// contacts.component.ts
...
import { IgxFilterOptions } from 'igniteui-angular/directives';
// import { IgxFilterOptions } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class ContactListComponent {
    public searchContact: string;
    ...
    get filterContacts(): IgxFilterOptions {
        const fo = new IgxFilterOptions();
        fo.key = 'name';
        fo.inputValue = this.searchContact;
        return fo;
    }
}

Después de importar,IgxFilterOptions necesitamos registrar un nuevo método getter que devuelva las opciones de filtrado para que el pipe las use cada vez que se actualice lasearchContact propiedad. Para que el filtro funcione, necesitamos registrar akey para filtrar el objeto de contacto. En nuestro caso, eso sería elname de cada contacto. La segunda propiedad que debe registrarse en elIgxFilterOptions objeto es el valor que debemos comprobar al comparar nuestro nombre de contacto. Esta sería lasearchContact propiedad que vinculamos al campo de entrada sobre nuestra lista de contactos.

Finalmente, debemos aplicar el tubo de filtrado a los datos de nuestros contactos antes de poder usarlo. Entonces en nuestra plantilla simplemente agregamos:

<!--contacts.component.html-->

<igx-list-item *ngFor="let contact of contacts | igxFilter: filterContacts; let i = index">
    ...
</igx-list-item>

List Item Selection

Los elementos de la lista tienen unaselected propiedad que nos ayuda a rastrear qué elementos están "seleccionados". Esta propiedad nos permite identificar y gestionar el estado de selección de cada artículo.

Aquí tienes un ejemplo que ilustra cómo cambia el estilo visual de los objetos al usar laselected propiedad:

Por defecto, laselected propiedad está configurada comofalse. Podemos alternar su valor usando una expresión en línea vinculada al(click) evento de cada elemento de la lista, cambiando efectivamente el estado visual del elemento cada vez que se hace clic.

<igx-list>
    <igx-list-item [isHeader]="true">Contacts</igx-list-item>
    @for (contact of contacts | igxFilter: filterContacts; track contact) {
      <igx-list-item [selected]="contact.selected" (click)="contact.selected = !contact.selected">
        <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
        <span igxListLineTitle>{{ contact.name }}</span>
        <span igxListLineSubTitle>{{ contact.phone }}</span>
        <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
          [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
        (mousedown)="mousedown($event)">star</igx-icon>
      </igx-list-item>
    }
  </igx-list>

El elemento de la lista también expone algunas variables CSS que puede usar para diseñar diferentes partes de los elementos seleccionados:

--item-background-selected
--item-text-color-selected
--item-title-color-selected
--item-action-color-selected
--item-subtitle-color-selected
--item-thumbnail-color-selected

igx-list-item {
  --item-background-selected: var(--ig-secondary-500);
  --item-title-color-selected: var(--ig-secondary-500-contrast);
  --item-subtitle-color-selected: var(--ig-info-100);
}

Si prefieres usar la función de tematización de lista, hay parámetros disponibles que te permiten estilizar el estado seleccionado de los elementos de la lista. Puedes encontrar más información sobre estos parámetros aquí:list-theme

Chat Component

En el ejemplo siguiente se muestra cómo crear un componente de chat simple mediante IgxList.

Estilismo

List Theme Property Map

Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:

Propiedad principal	Propiedad dependiente	Descripción
$background	$header-antecedentes	El color de fondo de la cabecera de la lista.
	$item antecedentes	El color de fondo del elemento de la lista.
$header-antecedentes	$header-text-color	El color del texto de la cabecera de la lista.
$item antecedentes	$background	El color de fondo de la lista.
	$header-antecedentes	El color de fondo de la cabecera de la lista.
	$item-plano-flotar	El elemento de la lista pasa el cursor al color de fondo.
	$item-text-color	El color del texto de los elementos de la lista.
	$item-título-color	El color del título del elemento de la lista.
	$item-acción-color	El color de acción del elemento de la lista.
	$item-miniatura-color	El color de miniatura del ítem de la lista.
	$item-subtítulos-color	El color de subtítulos del elemento de la lista.
	$border color	El color del borde de la lista. (Solo fluido/Bootstrap)
$item-plano-flotar	$item-activo-fondo	El color de fondo del elemento de la lista activa.
	$item-text-color-hover	El elemento de la lista pasa el color del texto.
	$item-título-color-pasar el cursor	El elemento de la lista pasa el cursor al color del título.
	$item-acción-color-flotar	El elemento de la lista flota en color de acción.
	$item-miniatura-color-pasar el cursor	El elemento de la lista pasa el cursor al color de la miniatura.
	$item-subtítulo-color-pasar el cursor	El elemento de la lista pasa el cursor al color de los subtítulos.
$item-activo-fondo	$item-trasfondo seleccionado	El color de fondo del elemento seleccionado de la lista.
	$item-color-text-active	El color del texto del elemento de la lista activa.
	$item-título-color-activo	El color del título del ítem de la lista activa.
	$item-acción-color-activo	El color de acción del ítem de la lista activa.
	$item-color-miniatura-activo	El color de miniatura del elemento de la lista activa.
	$item-subtítulo-color-activo	El color de subtítulos del elemento de la lista activa.
$item-trasfondo seleccionado	$item-text-color-selected	El color del texto del elemento seleccionado.
	$item-título-color-seleccionado	El color del título del elemento seleccionado de la lista.
	$item-acción-color-seleccionado	El color de acción del elemento seleccionado de la lista.
	$item-miniatura-color-seleccionado	El color de miniatura del elemento seleccionado de la lista.
	$item-subtítulo-color-seleccionado	El elemento seleccionado de la lista de subtítulos, color.

Nota: Los resultados reales pueden variar según la variante del tema.

Veamos cómo podemos cambiar el fondo de nuestra lista. Primero necesitamos importar index.scss al archivo .scss de nuestro componente.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende ellist-theme y, pasando solo el$background parámetro, el tema calculará automáticamente los colores de estado y los primeros planos contrastantes apropiados. Sin embargo, aún puedes definirlos manualmente si lo deseas.

$my-list-theme: list-theme(
  $background: #57a5cd
);

Echa un vistazo a lalist-theme sección para ver la lista completa de parámetros disponibles para estilizar la lista.

El último paso es incluir los temas recién creados.

@include css-vars($my-list-theme);

El resultado es el siguiente:

Para obtener una lista completa de los parámetros que puede cambiar para el componente de lista, consulte: Estilos de componentes IgxList

Styling with Tailwind

Puedes personalizar la lista usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

El archivo de utilidad incluye variantes tantolight comodark de tema.

Usalight-* clases para el tema ligero.
Usadark-* clases para el tema oscuro.
Añadir el nombre del componente después del prefijo, por ejemplo, ,light-list,dark-list.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el tema de la lista. La sintaxis es la siguiente:

<igx-list class="!light-list ![--background:#81B698] ![--item-background:#A3C7B2]">
    ...
</igx-list>

Note

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Al final, tu lista debería ser así:

API References

En este artículo cubrimos mucho terreno con el componente de lista de Angular. Creamos una lista de elementos de contacto. Usamos algunos componentes de Ignite UI for Angular adicionales dentro de los elementos de nuestra lista, como avatares e íconos. Creé un diseño de artículo personalizado y le di estilo. Finalmente, agregamos el filtrado de listas. El componente de lista tiene algunas API más para explorar, que se enumeran a continuación.

Componentes Angular adicionales que se utilizaron:

Theming Dependencies

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

Angular Descripción general del componente de vista de lista

Angular List Example

Getting Started with Ignite UI for Angular List

Note

Using the Angular List

Add List Items

Adding Avatar and Icons

List Items Panning

Note

Note

Angular filter list

List Item Selection

Chat Component

Estilismo

List Theme Property Map

Styling with Tailwind

Note

API References

Theming Dependencies

Additional Resources

Tematización