React Componente Lista suspensa - Visão geral

    Rica em recursos, a lista suspensa React oferece filtragem pronta para uso, acessibilidade, valores pré-selecionados, vinculação de dados flexível, agrupamento, personalização da interface do usuário e muito mais. O que esse componente praticamente faz é substituir de forma eficaz e fácil as tags de seleção de HTML, 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 React 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 React 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 o seu projeto - personalizações de estilo, opções de posicionamento suspenso React, modelos e capacidade de alterar o que e como é exibido no cabeçalho, rodapé, corpo, lista, etc.

    React Dropdown Example

    O exemplo de lista suspensa React a seguir demonstra o uso de um menu suspenso React 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 React

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Você precisará importar o IgrDropdown CSS necessário e registrar seu módulo, assim:

    import { IgrDropdown } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Para obter uma introdução completa ao Ignite UI for React, leia o tópico Introdução.

    <IgrDropdown>
    <div slot="target">
        <IgrButton><span>Options</span></IgrButton>
    </div>
    <IgrDropdownItem><span>Option 1</span></IgrDropdownItem>
    <IgrDropdownItem><span>Option 2</span></IgrDropdownItem>
    <IgrDropdownItem><span>Option 3</span></IgrDropdownItem>
</IgrDropdown>

    Target

    A lista suspensa React está posicionada em relação ao seu destino. O target slot permite que você forneça um componente interno que alterna a open propriedade ao clicar. Em alguns casos, você gostaria de usar um destino externo ou usar outro evento para alternar a abertura do menu suspenso. Você pode conseguir isso usando os showTarget métodos and toggleTarget​ ​hide que permitem fornecer o destino como um parâmetro. Por padrão, a lista suspensa usa absolute a posição CSS. Você precisará definir o IgrPositionStrategy menu suspenso do React para fixed quando o elemento de destino estiver dentro de um contêiner fixo, mas o menu suspenso 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 destino, você deve definir a sameWidth propriedade como true.

    Position

    O posicionamento preferencial do menu suspenso React pode ser definido usando a placement propriedade. O posicionamento padrão do menu suspenso é bottom-start. A flip propriedade determina se o posicionamento deve ser invertido se não houver espaço suficiente para exibir o menu suspenso no posicionamento especificado. A distância da lista suspensa React até seu destino pode ser especificada usando a distance propriedade.

    Escolha

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

    Item

    O IgrDropdownItem representa um item selecionável na lista suspensa. Você pode predefinir um item selecionado definindo a selected propriedade. Você também pode desabilitar um item para que ele não possa ser selecionado usando a disabled propriedade. O IgrDropdownItem tem um slot padrão que permite especificar o conteúdo do item. Você também pode fornecer conteúdo personalizado a ser renderizado antes ou depois do conteúdo usando os prefix slots and suffix. A value propriedade permite que você forneça um valor personalizado para um item. Se o value não estiver definido, ele será resolvido para o conteúdo de texto do item.

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

    Group

    Os itens do React Dropdown também podem ser agrupados usando o IgrDropdownGroup, tornando mais fácil para os usuários diferenciar categorias separadas. Veja-o em ação neste exemplo de lista suspensa React:

    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 menu suspenso e seus itens usando as partes CSS expostas. O IgrDropdown expõe base e list as partes, as IgrDropdownItem exposições prefix​ ​content e suffix as partes e a IgrDropdownGroup parte expõe 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