Visão geral da lista de React

    O elemento Lista Ignite UI for React é extremamente útil ao apresentar um grupo de itens. Você pode criar uma lista simples de itens textuais ou uma mais complexa, contendo uma matriz de diferentes elementos de layout. O IgrList componente exibe linhas de itens e também suporta um ou mais cabeçalhos. Cada item da lista é completamente modelável e suportará qualquer HTML válido ou outros componentes.

    React List Example

    O exemplo a seguir representa uma lista preenchida com contatos com um nome e um número de telefone propriedades. O IgrList componente demonstrado abaixo usa os IgrAvatar elementos and IgrButton para enriquecer a experiência do usuário e expor os recursos de configuração de imagem e botões de avatar para ações de texto e chamada.

    Usage

    Em sua essência, o componente web de lista permite que você exiba facilmente uma lista vertical de itens.

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Você precisará importar o IgrList CSS necessário e registrar seu módulo, assim:

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

IgrListModule.register();

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

    Add List Items

    Agora, podemos adicionar o seguinte código para obter uma lista simples de itens:

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

    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 de contatos com um nome e um número de telefone exibidos sob o nome. Para conseguir isso, podemos usar alguns dos slots que vêm com os itens da lista, conforme demonstrado no próximo exemplo:

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

    Depois de implementar o código acima, nosso componente de lista agora deve ficar assim:

    Adding Avatar and Buttons

    Podemos usar alguns de nossos outros componentes em conjunto com o IgrList componente para enriquecer a experiência e adicionar algumas funcionalidades. Podemos ter um belo avatar de imagem à esquerda do nome e dos valores do telefone. Além disso, podemos adicionar alguns botões à direita deles para permitir que o usuário envie mensagens de texto e ligue para contatos, então vamos atualizar nosso componente de lista de contatos para mostrar o avatar e os botões. Podemos fazer isso usando alguns dos slots do item da 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>

    O start slot deve ser usado para adicionar algum tipo de mídia antes de todos os outros conteúdos dos itens da nossa lista. O elemento de destino, no nosso caso, o IgrAvatar componente, também será fornecido com uma posição e espaçamento padrão.

    O end slot deve ser usado para itens de lista que possuem algum tipo de ação ou metadados, representados, por exemplo, por um interruptor, um botão, uma caixa de seleção, etc. Usaremos IgrButton componentes.

    Vamos também permitir que o usuário altere o tamanho da lista usando a variável CSS--ig-size. Adicionaremos alguns botões de opção para exibir todos os valores de tamanho. Dessa forma, sempre que um for selecionado, alteraremos o tamanho da 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 });
    }
}

    O resultado da implementação do código acima deve ser semelhante ao seguinte:

    Styling

    O IgrList expõe várias partes CSS, dando a você controle total sobre seu estilo:

    Nome Descrição
    start O contêiner inicial.
    end O contêiner final.
    content O cabeçalho e o contêiner de conteúdo personalizado.
    header O contêiner de título e subtítulo.
    title O contêiner de título.
    subtitle O contêiner de legendas. 
    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);
}

    Neste artigo, cobrimos muito terreno com o IgrList componente. Primeiro, criamos uma lista simples com itens de texto. Em seguida, criamos uma lista de itens de contato e adicionamos funcionalidade a eles usando alguns componentes Ignite UI for React adicionais, como o IgrAvatar e IgrButton. Por fim, alteramos a aparência do componente por meio das partes CSS expostas.

    API References

    Additional Resources