React Select

    O componente Ignite UI for React Selecionar permite uma única seleção de uma lista de itens, colocada em uma lista suspensa. Esse controle de formulário oferece uma navegação rápida na lista de itens, incluindo seleção, com base em uma correspondência de um ou vários caracteres.

    React Select Example

    Usage

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

    npm install igniteui-react

    Você precisará então importar o IgrSelect e o IgrSelectItem, seu CSS necessário, e registrar seu módulo, assim:

    import { IgrSelectModule, IgrSelect, IgrSelectItemModule, IgrSelectItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrSelectModule.register();
IgrSelectItemModule.register();

    [!Note] Please note that the select header and group components are not mandatory unless you want to use them.

    Para começar a usar o componente, adicione o IgrSelect junto com uma lista de IgrSelectItem opções para escolher:

    <IgrSelect>
  <IgrSelectItem value="Orange"><span>Orange</span></IgrSelectItem>
  <IgrSelectItem value="Apple"><span>Apple</span></IgrSelectItem>
  <IgrSelectItem value="Banana"><span>Banana</span></IgrSelectItem>
  <IgrSelectItem value="Mango"><span>Mango</span></IgrSelectItem>
</IgrSelect>

    Selecionar

    O IgrSelect componente pode ser usado dentro de um Form componente, portanto, ele expõe uma name propriedade a ser registrada. Ele também tem propriedades e label​ ​placeholder. A outlined propriedade é usada para fins de estilo apenas quando se trata do tema Material. Exceto pelo slot padrão, o componente fornece alguns outros slots, incluindo header, footer, helper-text, prefix,, suffix e toggle-icon. O tamanho do componente pode ser alterado usando a--ig-size variável CSS.

    Item

    O IgrSelectItem componente permite que os usuários especifiquem declarativamente uma lista de opções a serem usadas pelo IgrSelect controle. Cada item fornece uma value propriedade que representa os dados que ele carrega na seleção. O IgrSelectItem tem um slot padrão que permite especificar o conteúdo de texto do item. Este conteúdo de texto será usado como valor caso a value propriedade não esteja presente no IgrSelectItem. Você também pode fornecer conteúdo personalizado a ser renderizado antes ou depois do IgrSelectItem conteúdo usando os prefix slots and suffix. Você pode predefinir um item selecionado definindo a Selected propriedade. Você também pode desativar alguns ou todos os itens por meio da disabled propriedade.

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

    <IgrSelect>
  <IgrSelectHeader>
    <span>Tasks</span>
  </IgrSelectHeader>
</IgrSelect>

    Group

    Vários IgrSelectItem s podem ser colocados entre os colchetes de abertura e fechamento de um IgrSelectGroup componente para que os usuários possam agrupá-los visualmente. O IgrSelectGroup pode ser rotulado por meio de seu label slot e desativado por meio de sua disabled propriedade.

    [!Note] Keep in mind that if a select group is disabled, you cannot enable separate items of it.

    <IgrSelect>
  <IgrSelectGroup>
    <span slot="label">Europe</span>

    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
      </span>
      <span> Germany </span>
      <span slot="suffix">DE</span>
    </IgrSelectItem>

    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
      </span>
      <span> France </span>
      <span slot="suffix">FR</span>
    </IgrSelectItem>

    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
      </span>
      <span> Spain </span>
      <span slot="suffix">ES</span>
    </IgrSelectItem>
  </IgrSelectGroup>
</IgrSelect>

    Validation

    Além disso, o suporta a IgrSelect​ ​IgrInput maioria das propriedades, como required, disabled, autofocus, etc. O componente também expõe um método vinculado à sua validação:

    • reportValidity- verifica a validade e foca o componente se for inválido.

    Keyboard Navigation

    Quando a seleção está focada e a lista de opções não está visível:

    • Abra o select usando a combinação ALT + ↑ ↓ ou clicando na tecla Espaço ou Enter.
    • Feche a select combinação usando a ALT combinação + ↑ or ↓ ou qualquer uma das teclas , Enter​ ​Space, Esc or IgrTab.
    • Usar as teclas ← → selecionará o item anterior na lista.
    • Usar as teclas ↑ ↓ selecionará o próximo item na lista.
    • Usar as teclas Home ou End selecionará o primeiro ou o último item na lista.
    • Digitar caracteres consultará a lista de itens e selecionará aquele que mais se aproxima da entrada atual do usuário.

    Quando a seleção está focada e a lista de opções está visível:

    • Usar as teclas Enter ou Espaço selecionará um item e fechará a lista.
    • Usar as teclas ← → ativará o item anterior na lista.
    • Usar as teclas ↑ ↓ ativará o próximo item na lista.
    • Usar as teclas Home ou End ativará o primeiro ou o último item da lista.

    [!Note] The IgrSelect component supports only single selection of items.

    Styling

    Você pode alterar a aparência do componente Ignite UI for React IgrSelect e seus itens usando as partes CSS expostas listadas abaixo:

    Selecionar componente

    Nome da peça Descrição
    input A entrada igc encapsulada.
    label O rótulo de texto encapsulado.
    list Um wrapper que contém a lista de opções.
    prefix Um wrapper de prefixo que renderiza o conteúdo antes da entrada.
    suffix Um wrapper de sufixo que renderiza o conteúdo após a entrada.
    toggle-icon Um wrapper de ícone de alternância que renderiza o conteúdo dentro do wrapper de sufixo.
    helper-text Um wrapper de texto auxiliar que renderiza o conteúdo abaixo da entrada.

    Selecionar componente do item

    Nome da peça Descrição
    content O wrapper principal que contém o conteúdo de texto de um item.
    prefix Um wrapper de prefixo que renderiza o conteúdo antes do wrapper principal.
    suffix Um wrapper de sufixo que renderiza o conteúdo após o wrapper principal.

    Selecionar componente do grupo

    Nome da peça Descrição
    label Um wrapper de rótulo que renderiza o conteúdo acima dos itens do grupo selecionado. 
    igc-select::part(base) {
  background: var(--ig-primary-50);
}

igc-select-item[active] {
  background: var(--ig-secondary-300);
}

igc-select::part(input) {
  background-color: var(--ig-primary-50);
}

igc-select::part(prefix),
igc-select::part(suffix) {
  color: var(--ig-secondary-500-contrast);
  background: var(--ig-secondary-500);
}

    API Reference

    Additional Resources