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 usá-losIgbDropdown, você precisa registrá-los da seguinte forma:

    // in Program.cs file

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

    Target

    A lista Blazor Dropdown está posicionada relativamente ao seu alvo. Otarget slot permite que você forneça um componente embutido que alterna aopen propriedade ao clique. Em alguns casos, você vai querer usar um alvo externo ou outro evento para alternar a abertura do Menu Suspenso. Você pode conseguir isso usando osShow​Hide métodos eToggle que permitem fornecer o alvo como parâmetro. Por padrão, a lista suspensa usaabsolute a posição CSS. Você precisará definir oIgbPositionStrategy do Blazor Menu Suspenso parafixed quando o elemento alvo estiver dentro de um recipiente fixo, mas o Menu Suspenso não está. A lista suspensa é dimensionada automaticamente com base no conteúdo; se você quiser que a lista tenha a mesma largura do alvo, deve definir aSameWidth propriedade paratrue.

    Position

    A posição preferida do Blazor Menu Suspenso pode ser definida usando aPlacement propriedade. A posição padrão do Menu Suspenso ébottom-start. AFlip propriedade determina se a posição deve ser invertida caso não haja espaço suficiente para exibir o Menu Suspenso na posição especificada. A distância da lista Blazor Dropdown até seu destino pode ser especificada usando aDistance propriedade.

    Escolha

    EleIgbDropdown emite oChange evento quando o usuário seleciona um item. OSelect método do Menu Suspenso permite selecionar um item pelo seu índice ou valor.

    Item

    OIgbDropdownItem representa um item selecionável na lista suspensa. Você poderia pré-definir um item selecionado definindo aSelected propriedade. Você também pode desativar um item para que ele não possa ser selecionado usando aDisabled propriedade. EleIgbDropdownItem tem um slot padrão que permite especificar o conteúdo do item. Você também pode fornecer conteúdo personalizado para ser renderizado antes ou depois do conteúdo usando osprefix slots de '.suffix AValue propriedade permite que você forneça um valor personalizado para um item. Se oValue não for definido, ele resolve para o conteúdo do texto do item.

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

    Group

    Os itens do Blazor Menu Suspenso também podem ser agrupados usando oIgbDropdownGroup, facilitando para os usuários diferenciarem categorias separadas. Veja isso em ação neste exemplo Blazor Lista Suspensa:

    Scroll Strategy

    AScrollStrategy propriedade determina o comportamento do componente durante a rolagem do contêiner do elemento alvo. O valor padrão éscroll que significa que o Menu Suspenso será deslocado junto com seu alvo. Definir a propriedade parablock bloquear a rolagem se o menu suspenso for aberto. Você também pode definir a propriedade paraclose que o menu suspenso seja fechado automaticamente ao rolar a página.

    Keep Open

    Por padrão, o menu suspenso é fechado automaticamente quando o usuário clica fora dele ou seleciona um item. Você poderia prevenir esse comportamento usando asKeepOpenOnOutsideClick propriedades e.KeepOpenOnSelect​

    Styling

    Você pode mudar a aparência do Menu Suspenso e seus itens usando as partes CSS expostas. OIgbDropdown expõesbase elist partes, oIgbDropdownItem expõesprefix,content esuffix partes e oIgbDropdownGroup expõeslabel parte.

    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