Selección Blazor

    El componente Ignite UI for Blazor Select permite una única 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, basada en una coincidencia de uno o varios caracteres.

    Blazor Seleccionar ejemplo

    Uso

    Antes de utilizar el IgbSelect componente, debe registrarlo junto con sus componentes adicionales:

    // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbSelect componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

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

    [!Note] Tenga en cuenta que los componentes de grupo y encabezado de selección no son obligatorios a menos que desee usarlos.

    Para comenzar a usar el componente, agregue el IgbSelect junto con una lista de IgbSelectItem 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

    El IgbSelect componente se puede utilizar dentro de un Form componente, por lo que expone una Name propiedad con la que se va a registrar. También tiene a Label, y Placeholder propiedades. La Outlined propiedad se utiliza con fines de estilo solo cuando se trata del tema Material. A excepción de la ranura predeterminada, el componente proporciona algunas otras ranuras, entre las que se incluyen header, footer, helper-text, prefix,, suffix y toggle-icon. El tamaño del componente se puede cambiar mediante la--ig-size variable CSS.

    Artículo

    El IgbSelectItem componente permite a los usuarios especificar de forma declarativa una lista de opciones que utilizará el IgbSelect control. Cada elemento proporciona una Value propiedad que representa los datos que transporta tras la selección. Tiene IgbSelectItem una ranura predeterminada que le permite especificar el contenido de texto del elemento. Este contenido de texto se utilizará como valor en caso de que la Value propiedad no esté presente en el IgbSelectItem. También puede proporcionar contenido personalizado para que se represente antes o después del IgbSelectItem contenido mediante las prefix ranuras y suffix. Puede predefinir un elemento seleccionado estableciendo la Selected propiedad. También puede deshabilitar algunos o todos los elementos a través de la Disabled propiedad.

    Puede utilizar IgbSelectHeader para proporcionar un encabezado para un grupo de elementos.

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

    Grupo

    Se pueden colocar varios IgbSelectItem entre los corchetes de apertura y cierre de un componente IgbSelectGroup para que los usuarios puedan agruparlos visualmente. El IgbSelectGroup se puede etiquetar a través de su ranura label y deshabilitarlo a través de su propiedad Disabled.

    [!Note] Tenga en cuenta que si un grupo seleccionado está deshabilitado, no puede habilitar elementos separados del mismo.

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

    Validación

    Además, soporta la IgbSelect mayoría de las IgbInput propiedades, tales como Required,,, Disabled​ ​Autofocus etc. El componente también expone un método enlazado a su validación:

    • reportValidity: comprueba la validez y centra el componente si no es válido.

    Navegación por teclado

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

    • Abra Select usando la combinación ALT + ↑ ↓ o haciendo clic en la tecla Espacio o Enter.
    • Cierre Select usando la combinación ALT + ↑ o ↓ o cualquiera de las teclas Enter, Space, Esc o IgbTab.
    • Usando las teclas ← → seleccionará el elemento anterior en la lista.
    • Usando las teclas ↑ ↓ seleccionará el siguiente elemento en la lista.
    • El uso de las teclas Inicio o Fin 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:

    • El uso de las teclas Enter 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 teclas Inicio o Fin activará el primer o último elemento de la lista.

    [! Nota] El IgbSelect componente solo admite una selección única de elementos.

    Referencia de API

    Recursos adicionales