Visão geral da lista de Web Components

    O elemento List do Ignite UI for Web Components é 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 componente IgcListComponent exibe linhas de itens e suporta um ou mais cabeçalhos também. Cada item da lista é completamente modelável e suportará qualquer HTML válido ou outros componentes.

    Web Components List Example

    O exemplo a seguir representa uma lista preenchida com contatos com propriedades de nome e número de telefone. O componente IgcListComponent demonstrado abaixo usa os elementos IgcAvatarComponent e IgcButtonComponent para enriquecer a experiência do usuário e expor os recursos de configuração de imagem de avatar e botões 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 Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    import { defineComponents, IgcListComponent } from 'igniteui-webcomponents';

defineComponents(IgcListComponent);

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

    Add List Items

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

        <igc-list>
        <igc-list-header>Header</igc-list-header>
        <igc-list-item>
            <h2 slot="title">Item 1</h2>
        </igc-list-item>
        <igc-list-item>
            <h2 slot="title">Item 2</h2>
        </igc-list-item>
        <igc-list-item>
            <h2 slot="title">Item 3</h2>
        </igc-list-item>
    </igc-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 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:

    <igc-list>
    <igc-list-header>
        <h1>Contacts</h1>
    </igc-list-header>
    <igc-list-item>
        <h2 slot="title">Terrance Orta</h2>
        <span slot="subtitle">770-504-2217</span>
    </igc-list-item>
    <igc-list-item>
        <h2 slot="title">Richard Mahoney</h2>
        <span slot="subtitle">423-676-2869</span>
    </igc-list-item>
    <igc-list-item>
        <h2 slot="title">Donna Price</h2>
        <span slot="subtitle">859-496-2817</span>
    </igc-list-item>
</igc-list>

    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 o componente IgcListComponent para enriquecer a experiência e adicionar alguma funcionalidade. Podemos ter um avatar de imagem legal à esquerda dos valores de nome e telefone. Além disso, podemos adicionar alguns botões à direita deles para permitir que o usuário envie mensagens de texto e ligue para os 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.

        <igc-list>
        <igc-list-header>
            <h1>Job Positions</h1>
        </igc-list-header>
        <igc-list-item>
            <igc-avatar slot="start" src="https://randomuser.me/api/portraits/men/27.jpg" shape="circle">
                AA
            </igc-avatar>
            <h2 slot="title">Terrance Orta</h2>
            <span slot="subtitle">770-504-2217</span>
            <igc-button slot="end" variant="outlined">
                Text
            </igc-button>
            <igc-button slot="end" variant="outlined">
                Call
            </igc-button>
        </igc-list-item>
        <igc-list-item>
            <igc-avatar slot="start" src="https://randomuser.me/api/portraits/men/1.jpg" shape="circle">
                AA
            </igc-avatar>
            <h2 slot="title">Richard Mahoney</h2>
            <span slot="subtitle">423-676-2869</span>
            <igc-button slot="end" variant="outlined">
                Text
            </igc-button>
            <igc-button slot="end" variant="outlined">
                Call
            </igc-button>
        </igc-list-item>
        <igc-list-item>
            <igc-avatar slot="start" src="https://randomuser.me/api/portraits/women/50.jpg" shape="circle">
                AA
            </igc-avatar>
            <h2 slot="title">Donna Price</h2>
            <span slot="subtitle">859-496-2817</span>
            <igc-button slot="end" variant="outlined">
                Text
            </igc-button>
            <igc-button slot="end" variant="outlined">
                Call
            </igc-button>
        </igc-list-item>
    </igc-list>

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

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

    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.

    <igc-radio-group id="radio-group" alignment="horizontal">
    <igc-radio name="size" value="small" label-position="after">Small</igc-radio>
    <igc-radio name="size" value="medium" label-position="after">Medium</igc-radio>
    <igc-radio name="size" value="large" label-position="after" checked>Large</igc-radio>
</igc-radio-group>

    this.list = document.getElementById('list') as IgcListComponent;
this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;

this.radioGroup.addEventListener('click', (radio: any) => {
    this.list.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
});

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

    Styling

    O IgcListComponent 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 componente IgcListComponent. 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 adicionais Ignite UI for Web Components, como o IgcAvatarComponent e IgcButtonComponent. Por fim, alteramos a aparência do componente por meio das partes CSS expostas.

    API References

    Additional Resources