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 oIgcSelectComponent componente, 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 Comecando.

    [!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 oIgcSelectComponent junto com uma lista deIgcSelectItemComponent opções 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

    OIgcSelectComponent componente pode ser usado dentro de umForm componente, expondo assim umaname propriedade a ser registrada. Também possui propriedadeslabel eplaceholder. Aoutlined propriedade é usada apenas para fins de estilo quando se trata do tema Material. Exceto pelo slot padrão, o componente oferece alguns outros slots, incluindoheader,footer,helper-text,prefix,suffix, etoggle-icon. O tamanho do componente pode ser alterado usando a--ig-size variável CSS.

    Item

    OIgcSelectItemComponent componente permite que os usuários especifiquem declarativamente uma lista de opções a serem usadas peloIgcSelectComponent controle. Cada item fornece umavalue propriedade que representa os dados que carrega ao ser selecionado. EleIgcSelectItemComponent tem um slot padrão que permite especificar o conteúdo do texto do item. Este conteúdo de texto será usado como valor caso avalue propriedade não esteja presente noIgcSelectItemComponent imóvel. Você também pode fornecer conteúdo personalizado para ser renderizado antes ou depois doIgcSelectItemComponent conteúdo usando osprefix slots de '.suffix Você poderia pré-definir um item selecionado definindo aSelected propriedade. Você também pode desativar alguns ou todos os itens peladisabled propriedade.

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

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

    Group

    MúltiplosIgcSelectItemComponent s podem ser colocados entre os colchetes de abertura e fechamento de umIgcSelectGroupComponent componente para que os usuários possam agrupá-los visualmente. EleIgcSelectGroupComponent pode ser rotulado pelo seulabel slot e desativado por suadisabled propriedade.

    [!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, suportaIgcSelectComponent a maioria dasIgcInputComponent propriedades, comorequired,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 inválido.

    Keyboard Navigation

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

    • Abra usandoselect o ALT + ↑ ↓ combinação ou clicando na SPACE ou na ENTER tecla.
    • Feche aselect combinação usando a ALT combinação + ↑ ou ↓ qualquer uma das ENTER, SPACE, ESC ouIgcTabComponent as teclas .
    • Usar as teclas ← → selecionará o item anterior na lista.
    • Usar as teclas ↑ ↓ selecionará o próximo item na lista.
    • Usando as HOME teclas ou END selecionará o primeiro ou o último item da 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:

    • Usando as ENTER teclas ou SPACE 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 HOME teclas 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 Ignite UI for Web ComponentsIgcSelectComponent 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