Visão geral da lista de React

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

    React List Example

    O exemplo a seguir representa uma lista preenchida com propriedades de contatos com nome e número de telefone. OIgrList componente demonstrado abaixo utiliza osIgrAvatar elementos eIgrButton para enriquecer a experiência do usuário e expor as capacidades de definir a imagem do avatar e os botões para ações de texto e chamadas.

    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ê então precisará importar oIgrList CSS necessário e o necessário, assim:

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

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

    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 dos nossos outros componentes em conjunto com oIgrList 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 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 espaços dos itens 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>

    Ostart slot é destinado a adicionar algum tipo de mídia antes de todo o outro conteúdo da nossa lista. O elemento alvo, no nosso caso oIgrAvatar componente, também terá uma posição e espaçamento padrão.

    Oend slot é destinado a ser usado para itens de lista que possuem algum tipo de ação ou metadado, representados, por exemplo, por um interruptor, um botão, uma caixa de seleção, etc. Vamos usarIgrButton componentes.

    Vamos também permitir que o usuário altere o tamanho da lista usando a--ig-size variável CSS. Vamos adicionar alguns botões de acesso para exibir todos os tamanhos. Assim, sempre que um for selecionado, mudaremos o tamanho da lista.

    <IgrRadioGroup alignment="horizontal" style={{marginBottom: '10px'}}>
    <IgrRadio name="size" value="small" labelPosition="after" checked={this.state.listSize === "small" } onChange={this.onRadioChange}>
        <span>Small</span>
    </IgrRadio>
    <IgrRadio name="size" value="medium" labelPosition="after" checked={this.state.listSize === "medium" } onChange={this.onRadioChange}>
        <span>Medium</span>
    </IgrRadio>
    <IgrRadio name="size" value="large" labelPosition="after" checked={ this.state.listSize === "large" } onChange={this.onRadioChange}>
        <span>Large</span>
    </IgrRadio>
</IgrRadioGroup>

<IgrList size={this.state.listSize} />

public onRadioChange(e: any) {
    if (e.detail.checked == true) {
        this.setState({ listSize: e.detail.value });
    }
}

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

    Styling

    EleIgrList expõe várias partes de CSS, dando 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, abordamos muitos pontos sobre oIgrList componente. Primeiro, criamos uma lista simples com itens de texto. Depois, criamos uma lista de itens de contato e adicionamos funcionalidades a eles usando alguns componentes adicionais de Ignite UI for React, como oIgrAvatar eIgrButton. Por fim, mudamos a aparência do componente através das partes CSS expostas.

    API References

    Additional Resources