Componente de lista suspensa Blazor- Visão geral

    Rico em recursos, o Blazor Dropdown list oferece filtragem pronta para uso, acessibilidade, valores pré-selecionados, vinculação de dados flexível, agrupamento, personalização de IU e muito mais. O que esse componente faz na prática é substituir tags de seleção HTML de forma eficaz e fácil, permitindo que os usuários escolham rapidamente um valor não editável de um conjunto predefinido de várias opções.

    O componente Ignite UI for Blazor Dropdown exibe uma lista de alternância de valores predefinidos e permite que os usuários selecionem facilmente um único item de opção com um clique. Ele pode ser configurado rapidamente para atuar como um menu suspenso Blazor ou você pode simplesmente usá-lo para fornecer informações visuais mais úteis agrupando dados. Além disso, com o agrupamento, você pode usar dados planos e hierárquicos.

    Com nosso componente, você obtém todas as funções e opções de personalização necessárias para seu projeto – personalizações de estilo, opções de posicionamento Blazor Dropdown, modelos e capacidade de alterar o que e como é exibido no cabeçalho, rodapé, corpo, lista, etc.

    Blazor Dropdown Example

    O exemplo a seguir de Blazor Dropdown List demonstra o uso do menu Blazor Dropdown interativo simples em ação com três opções básicas para escolher. Veja como funciona.

    How to use the Dropdown List with Ignite UI for Blazor

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

    // in Program.cs file

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

    Target

    A lista suspensa Blazor é posicionada relativamente ao seu alvo. O slot target permite que você forneça um componente integrado que alterna a propriedade open ao clicar. Em alguns casos, você pode querer usar um alvo externo ou usar outro evento para alternar a abertura do Dropdown. Você pode fazer isso usando os métodos Show, Hide e Toggle que permitem que você forneça o alvo como um parâmetro. Por padrão, a lista suspensa usa posição CSS absolute. Você precisará definir o IgbPositionStrategy do Blazor Dropdown como fixed quando o elemento alvo estiver dentro de um contêiner fixo, mas o Dropdown não estiver. A lista suspensa é dimensionada automaticamente com base em seu conteúdo, se você quiser que a lista tenha a mesma largura que o alvo, você deve definir a propriedade SameWidth como true.

    Position

    O posicionamento preferencial do Blazor Dropdown pode ser definido usando a propriedade Placement. O posicionamento padrão do Dropdown é bottom-start. A propriedade Flip determina se o posicionamento deve ser invertido se não houver espaço suficiente para exibir o Dropdown no posicionamento especificado. A distância da lista Blazor Dropdown até seu destino pode ser especificada usando a propriedade Distance.

    Escolha

    O IgbDropdown emite o evento Change quando o usuário seleciona um item. O método Select do Dropdown permite que você selecione um item por seu índice ou valor.

    Item

    O IgbDropdownItem representa um item selecionável na lista suspensa. Você pode predefinir um item selecionado definindo a propriedade Selected. Você também pode desabilitar um item para que ele não possa ser selecionado usando a propriedade Disabled. O IgbDropdownItem tem um slot padrão que permite que você especifique o conteúdo do item. Você também pode fornecer conteúdo personalizado para ser renderizado antes ou depois do conteúdo usando os slots prefix e suffix. A propriedade Value permite que você forneça um valor personalizado para um item. Se o Value não for definido, ele resolverá para o conteúdo de texto do item.

    Você pode usar o IgbDropdownHeader para fornecer um cabeçalho para um grupo de itens.

    Group

    Os itens do Blazor Dropdown também podem ser agrupados usando o IgbDropdownGroup, facilitando para os usuários diferenciar categorias separadas. Veja em ação neste exemplo de Blazor Dropdown List:

    Scroll Strategy

    A propriedade ScrollStrategy determina o comportamento do componente durante a rolagem do contêiner do elemento de destino. O valor padrão é scroll, o que significa que o Dropdown será rolado com seu destino. Definir a propriedade como block bloqueará a rolagem se o Dropdown for aberto. Você também pode definir a propriedade como close o que significa que o Dropdown será fechado automaticamente na rolagem.

    Keep Open

    Por padrão, o Dropdown é fechado automaticamente quando o usuário clica fora dele ou seleciona um item. Você pode evitar esse comportamento usando as propriedades KeepOpenOnOutsideClick e KeepOpenOnSelect.

    Styling

    Você pode alterar a aparência do Dropdown e seus itens, usando as partes CSS expostas. O IgbDropdown expõe as partes base e list, o IgbDropdownItem expõe as partes prefix, content e suffix e o IgbDropdownGroup expõe a parte label.

    igc-dropdown::part(list) {
  height: 220px;
}

igc-dropdown-item[selected] {
  background: var(--ig-success-300);
}

igc-dropdown-group::part(label) {
  display: flex;
  justify-content: center;
}

    API Reference

    Additional Resources