Visão geral da lista Blazor

    O elemento Ignite UI for Blazor List é 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 IgbList exibe linhas de itens e também oferece suporte a um ou mais cabeçalhos. Cada item da lista é completamente modelável e oferecerá suporte a qualquer HTML válido ou outros componentes.

    Blazor List Example

    O exemplo a seguir representa uma lista preenchida com contatos com propriedades de nome e número de telefone. O componente IgbList demonstrado abaixo usa os elementos IgbAvatar e IgbButton 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.

    Antes de usar o IgbList, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbListModule));

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbList. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Para uma introdução completa à Ignite UI for Blazor, leia o tópico Introdução.

    Add List Items

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

    <IgbList>
    <IgbListHeader>Header</IgbListHeader>
    <IgbListItem>
        <h2 slot="title">Item 1</h2>
    </IgbListItem>
    <IgbListItem>
        <h2 slot="title">Item 2</h2>
    </IgbListItem>
    <IgbListItem>
        <h2 slot="title">Item 3</h2>
    </IgbListItem>
</IgbList>

    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:

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

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

    <IgbList>
    <IgbListHeader>
        <h1>Contacts</h1>
    </IgbListHeader>
    <IgbListItem>
        <IgbAvatar slot="start" src="https://static.infragistics.com/xplatform/images/avatars/8.jpg" Shape="@AvatarShape.Circle"/>
        <h2 slot="title">Terrance Orta</h2>
        <span slot="subtitle">770-504-2217</span>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Text</IgbButton>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Call</IgbButton>
    </IgbListItem>
    <IgbListItem>
        <IgbAvatar slot="start" src="https://static.infragistics.com/xplatform/images/avatars/17.jpg" Shape="@AvatarShape.Circle"/>
        <h2 slot="title">Richard Mahoney</h2>
        <span slot="subtitle">423-676-2869</span>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Text</IgbButton>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Call</IgbButton>
    </IgbListItem>
    <IgbListItem>
        <IgbAvatar slot="start" src="https://static.infragistics.com/xplatform/images/avatars/9.jpg" Shape="@AvatarShape.Circle"/>
        <h2 slot="title">Donna Price</h2>
        <span slot="subtitle">859-496-2817</span>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Text</IgbButton>
        <IgbButton slot="end" Variant="@ButtonVariant.Outlined">Call</IgbButton>
    </IgbListItem>
</IgbList>

    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 IgbAvatar, 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 IgbButton.

    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.

    <IgbRadioGroup Alignment="@RadioGroupAlignment.Horizontal">
    <IgbRadio Value="Small" label-position="after" Change="OnRadioOptionClick">Small</IgbRadio>
    <IgbRadio Value="Medium" label-position="after" Change="OnRadioOptionClick">Medium</IgbRadio>
    <IgbRadio Value="Large" label-position="after" Checked="true" Change="OnRadioOptionClick">Large</IgbRadio>
</IgbRadioGroup>

<IgbList style="margin-top: 10px;" Size="@ListSize" />

@code {
    public SizableComponentSize ListSize { get; set; }

    public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs e)
    {
        IgbRadio radio = e.Parent as IgbRadio;
        switch (radio.Value)
        {
            case "Small":
                {
                    this.ListSize = SizableComponentSize.Small;
                    break;
                }
            case "Medium":
                {
                    this.ListSize = SizableComponentSize.Medium;
                    break;
                }
            case "Large":
                {
                    this.ListSize = SizableComponentSize.Large;
                    break;
                }
        }
    }
}

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

    Styling

    The IgbList exposes several CSS parts, giving you full control over its style:

    Nome Descrição
    start The start container.
    end The end container.
    content The header and custom content container.
    header The title and subtitle container.
    title The title container.
    subtitle The subtitle container. 
    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 IgbList. 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 Blazor, como o IgbAvatar e o IgbButton. Por fim, alteramos a aparência do componente por meio das partes CSS expostas.

    API References

    Additional Resources