Componente de lista suspensa de Web Components- Visão geral

    Rico em recursos, o Web Components Dropdown list oferece filtragem pronta para uso, acessibilidade, valores pré-selecionados, vinculação de dados flexível, agrupamento, personalização de UI 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 Web Components 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 Web Components 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 simples 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 Web Components Dropdown, modelos e capacidade de alterar o que e como é exibido no cabeçalho, rodapé, corpo, lista, etc.

    Web Components Dropdown Example

    O exemplo a seguir Web Components Dropdown List demonstra o uso do menu Web Components 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 Web Components

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    import {
    defineComponents,
    IgcDropdownComponent
} from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDropdownComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Comecando.

    A maneira mais simples de começar a usar oIgcDropdownComponent é a seguinte:

    <igc-dropdown>
    <igc-button slot="target">Options</igc-button>
    <igc-dropdown-item>Option 1</igc-dropdown-item>
    <igc-dropdown-item>Option 2</igc-dropdown-item>
    <igc-dropdown-item>Option 3</igc-dropdown-item>
</igc-dropdown>

    Target

    A lista Web Components 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 osshowTarget​hide métodos etoggleTarget que permitem fornecer o alvo como parâmetro. Por padrão, a lista suspensa usaabsolute a posição CSS. Você precisará definir oIgcPositionStrategy do Web Components 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 Web Components 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 Web Components Dropdown até seu destino pode ser especificada usando adistance propriedade.

    Escolha

    EleIgcDropdownComponent 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

    OIgcDropdownItemComponent 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. EleIgcDropdownItemComponent 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 oIgcDropdownHeaderComponent para fornecer um cabeçalho para um grupo de itens.

    Group

    Os itens do Web Components Menu Suspenso também podem ser agrupados usando oIgcDropdownGroupComponent, facilitando para os usuários diferenciarem categorias separadas. Veja isso em ação neste exemplo Web Components 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. OIgcDropdownComponent expõesbase elist partes, oIgcDropdownItemComponent expõesprefix,content esuffix partes e oIgcDropdownGroupComponent 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