Blazor Selecionar

    O componente Ignite UI for Blazor Select 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.

    Blazor Select Example

    Usage

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

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbSelect. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

    <IgbSelect>
    <IgbSelectItem Value="orange">Orange</IgbSelectItem>
    <IgbSelectItem Value="apple">Apple</IgbSelectItem>
    <IgbSelectItem Value="banana">Banana</IgbSelectItem>
    <IgbSelectItem Value="mango">Mango</IgbSelectItem>
</IgbSelect>

    Selecionar

    O componente IgbSelect pode ser usado dentro de um componente Form, portanto, ele expõe uma propriedade Name para ser registrada. Ele também tem as 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 IgbSelectItem permite que os usuários especifiquem declarativamente uma lista de opções a serem usadas pelo controle IgbSelect. Cada item fornece uma propriedade Value que representa os dados que ele carrega na seleção. O IgbSelectItem 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 IgbSelectItem. Você também pode fornecer conteúdo personalizado para ser renderizado antes ou depois do conteúdo IgbSelectItem 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 IgbSelectHeader para fornecer um cabeçalho para um grupo de itens.

    <IgbSelect>
    <IgbSelectHeader>Tasks</IgbSelectHeader>
</IgbSelect>

    Group

    Vários IgbSelectItem s podem ser colocados entre os colchetes de abertura e fechamento de um componente IgbSelectGroup para que os usuários possam agrupá-los visualmente. O IgbSelectGroup 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.

    <IgbSelect>
    <IgbSelectGroup>
        <span slot="label">Europe</span>

        <IgbSelectItem>
          <IgbIcon @ref="IconRef" slot="prefix" name="place" collection="material"></IgbIcon>
          Germany
          <span slot="suffix">DE</span>
        </IgbSelectItem>

        <IgbSelectItem>
          <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
          France
          <span slot="suffix">FR</span>
        </IgbSelectItem>

        <IgbSelectItem>
          <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
          Spain
          <span slot="suffix">ES</span>
        </IgbSelectItem>
    </IgbSelectGroup>
</IgbSelect>

    Validation

    Além disso, o IgbSelect suporta a maioria das propriedades IgbInput, 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 barra de espaço ou na tecla Enter.
    • Feche o Select usando a combinação ALT + ↑ ou ↓ ou qualquer uma das teclas Enter, Espaço, Esc ou IgbTab.
    • 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 IgbSelect component supports only single selection of items.

    API Reference

    Additional Resources