Visão geral da lista Blazor

    O elemento Ignite UI for Blazor 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. OIgbList 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.

    Blazor List Example

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

    Antes de usá-losIgbList, você precisa registrá-los 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 aoIgbList componente. O seguinte deve 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 ao Ignite UI for Blazor, leia o tópico Comecando.

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

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

    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 oIgbAvatar 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 usarIgbButton 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.

    <IgbRadioGroup Alignment="@ContentOrientation.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

    EleIgbList 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 oIgbList 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 Blazor, como oIgbAvatar eIgbButton. Por fim, mudamos a aparência do componente através das partes CSS expostas.

    API References

    Additional Resources