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 oIgbSelect componente, 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 aoIgbSelect componente. O seguinte deve 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 oIgbSelect junto com uma lista deIgbSelectItem opções 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

    OIgbSelect 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

    OIgbSelectItem componente permite que os usuários especifiquem declarativamente uma lista de opções a serem usadas peloIgbSelect controle. Cada item fornece umaValue propriedade que representa os dados que carrega ao ser selecionado. EleIgbSelectItem 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 noIgbSelectItem imóvel. Você também pode fornecer conteúdo personalizado para ser renderizado antes ou depois doIgbSelectItem 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 oIgbSelectHeader para fornecer um cabeçalho para um grupo de itens.

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

    Group

    MúltiplosIgbSelectItem s podem ser colocados entre os colchetes de abertura e fechamento de umIgbSelectGroup componente para que os usuários possam agrupá-los visualmente. EleIgbSelectGroup 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.

    <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, suportaIgbSelect a maioria dasIgbInput 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 ouIgbTab 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 IgbSelect component supports only single selection of items.

    API Reference

    Additional Resources