Blazor Seleccionar

    El componente Seleccionar Ignite UI for Blazor permite una sola selección de una lista de elementos, colocados en un menú desplegable. Este control de formulario ofrece una navegación rápida por la lista de elementos, incluida la selección, en función de una coincidencia de uno o varios caracteres.

    Blazor Select Example

    Usage

    Before using the IgbSelect component, you need to register it together with its additional components:

    // in Program.cs file

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

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbSelect componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto 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 empezar a usar el componente, añade elIgbSelect junto con una lista deIgbSelectItem opciones para elegir:

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

    Seleccionar

    The IgbSelect component can be used inside a Form component, thus it exposes a Name property to be registered with. It also has a Label, and Placeholder properties. The Outlined property is used for styling purposes only when it comes to the Material theme. Except for the default slot, the component provides a few other slots including header, footer, helper-text, prefix, suffix, and toggle-icon. The component size can be changed using the --ig-size CSS variable.

    Item

    ElIgbSelectItem componente permite a los usuarios especificar declarativamente una lista de opciones que el control va a utilizarIgbSelect. Cada elemento proporciona unaValue propiedad que representa los datos que transporta al seleccionarse. TieneIgbSelectItem una ranura predeterminada que permite especificar el contenido de texto del objeto. Este contenido textual se utilizará como valor en caso de que laValue propiedad no esté presente en elIgbSelectItem. También podrías proporcionar contenido personalizado para renderizarse antes o después delIgbSelectItem contenido usando lasprefix ranuras ysuffix. Podrías predefinir un elemento seleccionado estableciendo laSelected propiedad. También podrías desactivar algunos o todos los elementos a través de laDisabled propiedad.

    Puedes usar elIgbSelectHeader para proporcionar un encabezado para un grupo de elementos.

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

    Group

    Se pueden colocar variasIgbSelectItem s entre los corchetes de apertura y cierre de unIgbSelectGroup componente para que los usuarios puedan agruparlos visualmente. SeIgbSelectGroup puede etiquetar a través de sulabel ranura y desactivarse mediante suDisabled propiedad.

    [!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

    Además, soportaIgbSelect la mayoría de lasIgbInput propiedades, comoRequired,Disabled,Autofocus, etc. El componente también expone un método vinculado a su validación:

    • reportValidity- comprueba la validez y enfoca el componente si no es válido.

    Keyboard Navigation

    Cuando la selección está enfocada y la lista de opciones no está visible:

    • Abre elSelect usando la ALT + ↓ ↑ combinación o haciendo clic en la SPACE o la ENTER tecla.
    • Cierra laSelect combinación usando la combinación de + ↑​ ​ALT o ↓ o cualquiera de las ENTER, SPACE, ESC oIgbTab las teclas.
    • Usando las teclas ← → seleccionará el elemento anterior en la lista.
    • Usando las teclas ↑ ↓ seleccionará el siguiente elemento en la lista.
    • Usando las HOME teclas o END seleccionará el primer o último elemento de la lista.
    • Al escribir caracteres se consultará la lista de elementos y se seleccionará el que más se asemeje a la entrada actual del usuario.

    Cuando la selección está enfocada y la lista de opciones está visible:

    • Usando las ENTER teclas o SPACE seleccionará un elemento y cerrará la lista.
    • Usando las teclas ← → se activará el elemento anterior de la lista.
    • El uso de las teclas ↑ ↓ activará el siguiente elemento de la lista.
    • El uso de las HOME teclas o END activará el primer o último elemento de la lista.

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

    API Reference

    Additional Resources