Descripción general Blazor ComboBox

Blazor ComboBox es un editor liviano que permite a los usuarios seleccionar, filtrar y agrupar fácilmente diferentes opciones predefinidas en una lista proporcionada. El componente también admite opciones para la navegación con el teclado Blazor ComboBox, plantillas para personalizar cómo se muestran los elementos, el encabezado y el pie de página.

El componente ComboBox Ignite UI for Blazor ofrece una lista de opciones entre las que los usuarios pueden elegir. Muestra todas las opciones en una lista virtualizada de elementos, lo que significa que el ComboBox puede mostrar simultáneamente miles de registros, en los que se pueden seleccionar una o más opciones. Además, el componente cuenta con funciones de filtrado que distinguen entre mayúsculas y minúsculas, agrupación, vinculación de datos complejos y más.

Blazor ComboBox Example

Getting Started with Blazor ComboBox

Para empezar con elIgbCombo componente, primero necesitamos registrar su módulo de la siguiente manera:

// in Program.cs file

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

También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbCombo 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" />

Warning

ElIgbCombo componente no funciona con el elemento estándar<form>. ÚsaloForm en su lugar.

Luego, vincularemos una serie de objetos a la fuente de datos combinada utilizada para crear la lista de opciones.

<IgbCombo T="object" Id="basic-combo" DisplayKey="name" ValueKey="id" Data="Data" />

@code {
    private class City {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }

    private List<City> Data = new List<City> {
        new City {
            Id = "UK01",
            Name = "London",
            Country = "United Kingdom",
        },
        new City {
            Id = "BG01",
            Name = "Sofia",
            Country = "Bulgaria",
        },
        new City {
            Id = "US01",
            Name = "New York",
            Country = "United States",
        },
    };
}

Data value and display properties

Cuando el combo está vinculado a una lista de datos complejos (es decir, objetos), necesitamos especificar una propiedad que el control utilizará para manejar la selección de elementos. El componente expone las siguientes propiedades:

• T-requerió, siValueKey se omite, esto debe establecerse como "objeto", de lo contrario debe coincidir con el tipo de propiedad deValueKey.

• ValueKey-Opcional, requerido para objeto de datos complejo - Determina qué campo de la fuente de datos se usará para hacer selecciones. SiValueKey se omite, la API de selección usará referencias a objetos para seleccionar elementos.
• DisplayKey-Opcional, recomendado para objetos de datos complejos - Determina qué campo en la fuente de datos se usa como valor de visualización. Si no se especifica ningún valorDisplayKey, la combinación usará el especificadoValueKey (si es que lo hay). En nuestro caso, queremos que la combinación muestre elname de cada ciudad y use elid campo para la selección de objetos y como el valor subyacente de cada uno. Por lo tanto, proporcionamos estas propiedades a las combinacionesValueKey yDisplayKey respectivamente.

Note

Cuando la fuente de datos consiste en tipos primitivos (por ejemplostrings,numbers etc.), no especifiques unValueKey y/oDisplayKey.

Setting Value

El componente ComboBox expone unValue getter y un setter además de un atributo, que también se llama valor. Puedes usar el atributo valor para establecer los elementos seleccionados en la inicialización de componentes.

Si quieres leer el valor, es decir, la lista de elementos seleccionados actualmente, o actualizar el valor, usa el receptor y el colocador respectivamente. El que obtiene el valor devolverá una lista de todos los elementos seleccionados tal y como los representaValueKey. Del mismo modo, si quieres actualizar la lista de elementos seleccionados usando el valorador, deberías proporcionar una lista de elementos según élValueKey.

Ejemplo:

Selection API

El componente combinado expone API que le permiten cambiar los elementos seleccionados actualmente.

Además de seleccionar elementos de la lista de opciones por interacción del usuario, puedes seleccionar elementos de forma programática. Esto se hace mediante losSelect métodos y (yDeselect métodos). Puedes pasar una variedad de elementos a ambos métodos. Si los métodos se llaman sin argumentos, todos los elementos serán seleccionados o deseleccionados dependiendo de qué método se llame. Si has especificado aValueKey para tu componente de combo, entonces deberías pasar las teclas de valor de los objetos que quieres seleccionar/deseleccionar:

Seleccionar/deseleccionar algunos elementos

<IgbCombo
    @ref="Combo"
    Label="Cities"
    Placeholder="Pick a city"
    Data="Data"
    ValueKey="Id"
    DisplayKey="Name">
</IgbCombo>

@code {
    private List<City> Data;
    private IgbCombo Combo;
    private object[] Cities;

    protected override void OnInitialized() {
        this.Data = SampleData.Cities;
        this.Cities = new object[] { "UK01", "UK02", "UK03", "UK04", "UK05" };
    }

    public void SelectCities() {
        this.Combo.Select(Cities);
    }

    public void DeselectCities() {
        this.Combo.Deselect(Cities);
    }
}

Seleccionar/deseleccionar todos los elementos

@code {
    public void SelectAll() {
        this.Combo.Select(new object[] {});
    }

    public void DeselectAll() {
        this.Combo.Deselect(new object[] {});
    }
}

Si se omite laValueKey propiedad, tendrás que listar los elementos que deseas seleccionar/deseleccionar como referencias a objetos:

Validation

El componente Ignite UI for Blazor Combo soporta la mayoría de lasIgbInput propiedades, comoRequired,Disabled,Autofocus,Invalid, etc. El componente también expone dos métodos vinculados a su validación:

• ReportValidity- comprueba la validez y devuelve true si el componente cumple con las restricciones de validación.
• CheckValidity- un envoltorio alrededor de reportValidity para cumplir con la API de entrada nativa.

Keyboard Navigation

Cuando el componente combinado está enfocado y la lista de opciones no está visible:

• Abra la lista de opciones usando las teclas Abajo/Alt + Abajo.

Cuando el componente combinado está enfocado y la lista de opciones está visible:

• Usar la tecla Abajo activará el siguiente elemento de la lista.
• Usar la tecla Arriba activará el elemento anterior de la lista. Si el primer elemento ya está activo, centrará la entrada.
• El uso de las HOME teclas o END activará el primer o el último elemento de la lista.
• Usando la SPACE clave se seleccionará el elemento activo.
• Al usar la ENTER clave, se seleccionará el elemento activo y se cerrará la lista de opciones.
• El uso de las ESC teclas o TAB/SHIFT + TAB, se cerrará la lista de opciones.

Styling

Puedes cambiar la apariencia delIgbCombo componente y sus elementos utilizando las partes CSS expuestas que se enumeran a continuación:

Nombre de la pieza	Descripción
label	La etiqueta de texto encapsulado.
input	El campo de entrada principal.
native-input	La entrada nativa del campo de entrada principal.
prefix	El contenedor de prefijo.
suffix	El contenedor del sufijo.
toggle-icon	El contenedor del icono de alternancia.
clear-icon	El contenedor de iconos claros.
case-icon	Un contenedor de ícono de caso que presenta contenido dentro del sufijo de la entrada del filtro.
helper-text	El contenedor de texto auxiliar.
search-input	El campo de entrada de búsqueda.
list-wrapper	La lista de opciones de contenedor.
list	El cuadro de lista de opciones.
item	Representa cada elemento de la lista de opciones.
group-header	Representa cada encabezado en la lista de opciones.
active	Se agrega a la lista de piezas del artículo cuando el artículo está activo.
selected	Se adjunta a la lista de piezas del artículo cuando se selecciona el artículo.
checkbox	Representa cada casilla de verificación de cada elemento de la lista.
checkbox-indicator	Representa el indicador de casilla de verificación de cada elemento de la lista.
checked	Se adjunta a la lista de piezas de la casilla de verificación cuando la casilla de verificación está marcada.
header	El contenedor que contiene el contenido del encabezado.
footer	El contenedor que contiene el contenido del pie de página.
empty	El contenedor que contiene el contenido vacío.

Usando las partes CSS, tenemos control total sobre el estilo Combo.

igc-combo::part(search-input) {
  background-color: var(--ig-gray-100);
  border-radius: 2px;
}

igc-combo::part(input) {
  background-color: var(--ig-gray-100);
}

igc-combo::part(prefix) {
  background-color: var(--ig-secondary-50);
  color: var(--ig-primary-500);
}

igc-combo::part(toggle-icon) {
  color: var(--ig-primary-500);
}

API Reference

• IgbCombo
• Styling & Themes

Additional Resources

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub