Visão geral do componente Angular List View

    O componente Ignite UI for Angular Lista exibe linhas de itens e suporta um ou mais itens de cabeçalho, bem como busca e filtragem dos itens da lista. Cada item da lista é completamente templacionável e suporta qualquer componente válido de HTML ou Angular. O componente de lista também oferece funcionalidade de panorâmica incorporada, modelos para estados vazios e de carga, e suporta virtualização para listas grandes usando aIgxForOf diretiva.

    Angular List Example

    O exemplo a seguir representa uma lista preenchida com propriedades de contatos com nome e número de telefone. OIgxList componente utilizaigx-avatar eigx-icon enriquece a experiência do usuário e expõe as capacidades de definir a imagem do avatar e outro ícone para o contato favorito. Além disso, a Visualização de Lista expõe capacidades de ordenação alcançadas usando nosso tubo de filtragem.

    Getting Started with Ignite UI for Angular List

    Para começar a usar o componente Ignite UI for Angular List View, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar oIgxListModule arquivo no app.module.ts.

    Note

    Este componente pode utilizar opcionalmenteHammerModule. ​ Ele pode ser importado no módulo raiz da aplicação para que as interações por toque funcionem como esperado.​

    // 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 você pode importarIgxListComponent como uma dependência independente ou usar oIGX_LIST_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

    // 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 {}

    Agora que você importou o módulo ou diretivas Ignite UI for Angular List, pode começar a usar oigx-list componente.

    Using the Angular List

    Então, no modelo do nosso componente contatos, podemos criar nossa lista, mas e se atualmente (ou em algum momento no futuro) não tivermos itens nela? Nesse caso, a lista Angular nos fornece um modelo padrão que é usado quando a lista está vazia. Sempre podemos fornecer nosso próprio modelo para a aparência da nossa lista vazia simplesmente usando aigxEmptyList diretriz. Nesse caso, o modelo padrão não será usado:

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

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

    E nosso estilo para o modelo vazio:

    /* 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);
}

    Se tudo correr bem, é assim que nossa lista vazia deve ficar:

    Às vezes pode haver um atraso no carregamento dos seus dados. Nesse caso, você pode definir a propriedade daisLoading lista comotrue e um modelo padrão informará o usuário sobre o processo contínuo de carregamento de dados. Você também pode fornecer seu próprio modelo de carregamento usando aigxDataLoading diretiva:

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

    É legal ter um modelo para quando a lista estiver vazia, mas agora vamos adicionar alguns itens! Podemos adicionar o seguinte código para obter uma lista simples de itens:

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

    Se tudo correr bem, você deverá ver o seguinte no seu navegador:

    Vamos melhorar um pouco o nosso jogo e aprimorar os itens da nossa lista. Digamos que queremos criar uma lista Angular de contatos com um nome e um número de telefone exibidos abaixo do nome. Em nosso arquivo typescript do componente, podemos definir uma lista de contatos:

    // 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"
}];

    Agora que temos alguns dados que queremos renderizar, vamos configurar alguma marcação. Se quisermos algum estilo pronto para uso, podemos usar algumas das diretivas que vêm com os itens da lista.

    Vejamos como podemos usar alguns deles no próximo exemplo:

    <!--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 as diretivasigxListLineTitle eigxListLineSubTitle dão aos itens da lista um visual padrão.

    Depois de tudo isso, nossa lista Angular deve ficar assim:

    Adding Avatar and Icons

    Podemos usar alguns dos nossos outros componentes em conjunto com oIgxList componente para enriquecer a experiência e adicionar alguma funcionalidade. Podemos ter um avatar com foto bonito à esquerda dos valores do nome e do telefone. Além disso, podemos adicionar um ícone de estrela à direita deles para permitir que o usuário marque um contato como favorito. Para isso, vamos pegar os módulos IgxAvatar e IgxIcon e importá-los no nosso arquivo 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 {}

    Em seguida, precisamos adicionar mais informações ao nosso objeto de contato, como umaphoto fonte para nosso avatar e umaisFavorite propriedade para indicar o status favorito do contato.

    // 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
}];

    Legal, agora vamos atualizar o template para nossa lista de contatos para mostrar o avatar e o ícone. Novamente, podemos fazer isso usando algumas das diretivas 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>
    • igxListThumbnailé feito para ser usado caso precisemos adicionar algum tipo de mídia no início dos itens da nossa lista. A diretiva vai envolver o elemento alvo no nosso caso, igx-avatar, em um contêiner que fornecerá alguma posição e espaçamento padrão.
    • igxListActioné destinado a ser usado para itens de lista que possuem algum tipo de ação ou metadado, por exemplo, interruptor, botão de rádio, caixa de seleção, etc. No nosso caso, a ação será representada por umigx-icon. Novamente, a diretiva irá envolver o elemento alvo em um recipiente que terá a posição e espaçamento corretos.
    • igxListLineé feito para ser usado se precisarmos de algum texto entreigxListThumbnail os caminhos, eigxListAction a diretiva garante que a posição, espaçamento e alinhamento do texto fiquem ótimos com as outras duas diretivas por perto.

    Em seguida, ouvimos um evento de clique no componente IgxIcon para alternar a propriedade isFavorite em nosso objeto de contato.

    // contacts.component.ts

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

    Vamos também permitir que o usuário escolha o tamanho da lista usando a--ig-size propriedade personalizada CSS. Faremos isso importando eIgxButtonGroupModule usando o IgxButtonGroup para exibir todos os valores de tamanho. Assim, sempre que um for selecionado, atualizamos o tamanho da 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})`;
}

    E aqui está o resultado de todo esse trabalho:

    List Items Panning

    Agora que temos uma lista de Angular tão bonita com contatos e seus números de telefone, por que não implementamos a capacidade de ligar para um contato? EleIgxList tem a solução perfeita para isso - panorâmica de itens de lista. Para isso, você precisa implementar os seguintes passos:

    • Ative o panoramagem usando asallowLeftPanning propriedades e/ouallowRightPanning​
    • Definir modelo(s) para a panorâmica esquerda e/ou direita
    • Manipule os eventos de panorâmica do item da lista e execute a ação desejada

    O exemplo a seguir demonstra como lidar com panorâmicas tanto à esquerda quanto à direita. O gerenciador de eventos para panorâmica à direita mostra uma mensagem de brinde. O gerenciador de eventos para a panorâmica à esquerda exclui um item doIgxList.

    Note

    Por favor, note que a remoção de itens da lista é uma tarefa de aplicação. OIgxList próprio não pode remover itens da fonte de dados porqueIgxList não tem referência à fonte de dados.

    Aqui está o código HTML do exemplo:

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

    O exemplo acima usa alguns estilos CSS que podem ser encontrados aqui:

    /* 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;
}

    E finalmente aqui está o código typescript que manipula os 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

    Ao fazer a panorâmica dos itens da lista, há um limite que deve ser atingido para que os eventos de panorâmica sejam emitidos. Você pode alterar o limite usando a propriedade doIgxList​panEndTriggeringThreshold 's. Por padrão, essa propriedade tem um valor de 0,5, o que significa 50% da largura do item da lista.

    Agora tente você mesmo analisar os itens da lista:

    Angular filter list

    Nossa lista está ótima, mas não seria ainda melhor se pudéssemos procurar contatos por nome? Podemos fazer isso facilmente usando nosso pipe de filtragem. Vamos fazer isso.

    Vamos primeiro adicionar um campo de entrada no topo do nosso modelo de componente Angular e vinculá-lo a uma propriedade em nosso componente chamada 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>

    É hora de importar oIgxFilterModule e oIgxInputGroupModule no nosso arquivo app.module.ts eIgxFilterOptions no nosso componente contatos:

    // 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;
    }
}

    Após importar,IgxFilterOptions precisamos registrar um novo método getter que retorne as opções de filtragem para serem usadas pelo pipe toda vez que asearchContact propriedade for atualizada. Para o filtro funcionar, precisamos registrar akey para filtrar o objeto de contato. No nosso caso, esse seria oname de cada contato. A segunda propriedade que precisa ser registrada noIgxFilterOptions objeto é o valor que devemos verificar ao comparar nosso nome de contato. Essa seria asearchContact propriedade que vinculamos ao campo de entrada acima da nossa lista de contatos.

    Por fim, precisamos aplicar o pipe de filtragem aos nossos dados de contatos antes de podermos usá-lo. Então, em nosso modelo, simplesmente adicionamos:

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

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

    List Item Selection

    Os itens da lista têm umaselected propriedade que nos ajuda a rastrear quais itens estão "selecionados". Essa propriedade nos permite identificar e gerenciar o status de seleção de cada item.

    Aqui está um exemplo ilustrando como o estilo visual dos itens muda ao usar aselected propriedade:

    Por padrão, aselected propriedade é definida comofalse. Podemos alternar seu valor usando uma expressão inline vinculada ao(click) evento de cada item da lista, efetivamente mudando o estado visual do item a cada 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>

    O item de lista também expõe algumas variáveis CSS que você pode usar para estilizar diferentes partes dos elementos selecionados:

    • --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);
}

    Se você preferir usar a função de tema de lista, existem parâmetros disponíveis que permitem estilizar o estado selecionado dos itens da lista. Você pode encontrar mais informações sobre esses parâmetros aqui:list-theme

    Chat Component

    O exemplo a seguir demonstra como criar um componente de bate-papo simples usando IgxList.

    Estilização

    List Theme Property Map

    Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente para refletir a alteração:

    Propriedade primária Propriedade dependente Descrição
    $background $header-contexto A cor de fundo do cabeçalho da lista.
    $item-contexto A cor de fundo do item da lista.
    $header-contexto $header-cor-texto A cor do cabeçalho da lista.
    $item-contexto
    		 $background A cor de fundo da lista.
    $header-contexto A cor de fundo do cabeçalho da lista.
    $item-fundo-pairar O item da lista passe a cor de fundo.
    $item-text-color O item da lista cor do texto.
    $item-título-cor A cor do título do item da lista.
    $item-ação-cor A cor da ação do item da lista.
    $item-cor do thumbnail A cor da miniatura do item da lista.
    $item-legenda-cor O item da lista é a cor das legendas.
    $border cor A cor da borda da lista. (Apenas fluente/Bootstrap)
    $item-fundo-pairar
    		 $item-ativo-antecedentes A cor de fundo do item da lista ativa.
    $item-text-color-hover O item da lista passa a cor do texto.
    $item-título-cor-passar o mouse O item da lista passa a cor do título.
    $item-ação-cor-pairar O item da lista passa a cor da ação.
    $item-thumbnail-color-hover O item da lista passa a cor da miniatura.
    $item-legenda-cor-passar o mouse O item da lista passe a cor das legendas.
    $item-ativo-antecedentes
    		 $item-antecedentes selecionados A cor de fundo do item selecionado da lista.
    $item-text-color-active A cor do texto do item da lista ativa.
    $item-título-cor-ativo Cor do título do item da lista ativa.
    $item-ação-cor-ativo A cor de ação do item da lista ativa.
    $item-thumbnail-color-active A miniatura do item da lista de ativos.
    $item-legenda-cor-ativo A cor do item da lista ativa e da legenda.
    $item-antecedentes selecionados
    		 $item-texto-color-selecionado A cor do texto do item selecionado da lista.
    $item-título-cor-selecionado A cor do título do item selecionado da lista.
    $item-ação-cor-selecionada A cor da ação do item selecionado da lista.
    $item-thumbnail-color-selected A miniatura do item selecionado da lista.
    $item-legenda-cor-selecionada A cor do legenda do item selecionado.

    Nota: Os resultados reais podem variar dependendo da variante do tema.

    Vamos ver como podemos mudar o fundo da nossa lista. Primeiro precisamos importar index.scss para o nosso arquivo .scss do componente.

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

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

    Seguindo a abordagem mais simples, criamos um novo tema que estende olist-theme e, passando apenas pelo$background parâmetro, o tema calculará automaticamente as cores de estado e os primeiros planos contrastantes apropriados. No entanto, você ainda pode defini-los manualmente, se desejar.

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

    Dê uma olhada nalist-theme seção para uma lista completa dos parâmetros disponíveis para estilizar a lista.

    A última etapa é incluir os temas recém-criados.

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

    O resultado é o seguinte:

    Para uma lista completa de parâmetros que você pode alterar para o componente de lista, consulte: Estilos IgxListComponent

    Styling with Tailwind

    Você pode estilizar a lista usando nossas classes utilitárias personalizadas do Tailwind. Certifique-se de configurar o Tailwind primeiro.

    Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

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

    O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

    • Uselight-* as aulas para o tema da luz.
    • Usedark-* classes para o tema sombrio.
    • Adicione o nome do componente após o prefixo, por exemplo,light-list,dark-list.

    Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

    Você pode encontrar a lista completa de propriedades no tema da lista. A sintaxe é a seguinte:

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

    O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

    No final, sua lista deve ficar assim:

    API References

    Neste artigo, cobrimos muito terreno com o componente de lista Angular. Criamos uma lista de itens de contato. Usamos alguns componentes adicionais Ignite UI for Angular dentro dos nossos itens de lista, como avatares e ícones. Criamos alguns layouts de itens personalizados e os estilizamos. Por fim, adicionamos filtragem de lista. O componente de lista tem mais algumas APIs para explorar, que estão listadas abaixo.

    Componentes Angular adicionais que foram usados:

    Theming Dependencies

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.