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ê então precisará importar oIgrDropdown CSS necessário e registrar seu módulo, assim:

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

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

    <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 React 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 oIgrPositionStrategy do React 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 React 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 React Dropdown até seu destino pode ser especificada usando adistance propriedade.

    Escolha

    EleIgrDropdown 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

    OIgrDropdownItem 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. EleIgrDropdownItem 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 oIgrDropdownHeader para fornecer um cabeçalho para um grupo de itens.

    Group

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