Visão geral da lista de Web Components

    O elemento Ignite UI for Web Components 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. OIgcListComponent 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.

    Web Components List Example

    O exemplo a seguir representa uma lista preenchida com propriedades de contatos com nome e número de telefone. OIgcListComponent componente demonstrado abaixo utiliza osIgcAvatarComponent elementos eIgcButtonComponent 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 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 Comecando.

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

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

    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 oIgcAvatarComponent 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 usarIgcButtonComponent 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.

    <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

    EleIgcListComponent 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 oIgcListComponent 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 Web Components, como oIgcAvatarComponent eIgcButtonComponent. Por fim, mudamos a aparência do componente através das partes CSS expostas.

    API References

    Additional Resources