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 Introdução.

    A maneira mais simples de começar a usar o IgcDropdownComponent é 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 suspensa Web Components é 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 showTarget, hide e toggleTarget 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 IgcPositionStrategy do Web Components Dropdown como fixed quando o elemento de destino 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 Web Components 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 Web Components Dropdown até seu destino pode ser especificada usando a propriedade distance.

    Escolha

    O IgcDropdownComponent 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 IgcDropdownItemComponent 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 IgcDropdownItemComponent 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 IgcDropdownHeaderComponent para fornecer um cabeçalho para um grupo de itens.

    Group

    Os itens do Web Components Dropdown também podem ser agrupados usando o IgcDropdownGroupComponent, facilitando para os usuários diferenciar categorias separadas. Veja em ação neste exemplo de Web Components 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 IgcDropdownComponent expõe as partes base e list, o IgcDropdownItemComponent expõe as partes prefix, content e suffix e o IgcDropdownGroupComponent 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