Selecionar Web Components

    O componente Select do Ignite UI for Web Components permite uma única seleção de uma lista de itens, colocados em um menu suspenso. Este controle de formulário oferece uma navegação rápida na lista de itens, incluindo seleção, com base em uma correspondência de caracteres única ou múltipla.

    Web Components Select Example

    Usage

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

    npm install igniteui-webcomponents

    Antes de usar o componente IgcSelectComponent, você precisa registrá-lo junto com seus componentes adicionais:

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

defineComponents(IgcSelectComponent);

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

    [!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 IgcSelectComponent junto com uma lista de IgcSelectItemComponent para escolher:

    <igc-select>
    <igc-select-item value="orange">Orange</igc-select-item>
    <igc-select-item value="apple">Apple</igc-select-item>
    <igc-select-item value="banana">Banana</igc-select-item>
    <igc-select-item value="mango">Mango</igc-select-item>
</igc-select>

    Selecionar

    O componente IgcSelectComponent pode ser usado dentro de um componente Form, portanto, ele expõe uma propriedade name para ser registrada. Ele também tem propriedades label e placeholder. A propriedade outlined é 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 variável CSS--ig-size.

    Item

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

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

    <igc-select>
    <igc-select-header>Tasks</igc-select-header>
</igc-select>

    Group

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

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

    <igc-select>
    <igc-select-group>
        <span slot="label">Europe</span>

        <igc-select-item>
          <igc-icon @ref="IconRef" slot="prefix" name="place" collection="material"></igc-icon>
          Germany
          <span slot="suffix">DE</span>
        </igc-select-item>

        <igc-select-item>
          <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
          France
          <span slot="suffix">FR</span>
        </igc-select-item>

        <igc-select-item>
          <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
          Spain
          <span slot="suffix">ES</span>
        </igc-select-item>
    </igc-select-group>
</igc-select>

    Validation

    Além disso, o IgcSelectComponent suporta a maioria das propriedades IgcInputComponent, 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 usando a combinação ALT + ↑ ou ↓ ou qualquer uma das teclas Enter, Espaço, Esc ou IgcTabComponent.
    • 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 IgcSelectComponent component supports only single selection of items.

    Styling

    Você pode alterar a aparência do componente IgcSelectComponent do Ignite UI for Web Components 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