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.
Ejemplo de cuadro combinado Blazor
EXAMPLE
MODULES
DATA
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Infragistics Blazor
builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections;
using System.Collections.Generic;
namespaceInfragistics.Samples
{
publicclassCity {
publicstring Id { get; set; }
publicstring Name { get; set; }
publicstring Country { get; set; }
}
publicclassSampleData {
publicstatic List<City> Cities = GetCities();
publicstatic List<City> GetCities() {
var data = new List<City> {
new City {
Id = "UK01",
Name = "London",
Country = "United Kingdom",
},
new City {
Id = "UK02",
Name = "Manchester",
Country = "United Kingdom",
},
new City {
Id = "UK03",
Name = "Birmingham",
Country = "United Kingdom",
},
new City {
Id = "UK04",
Name = "Glasgow",
Country = "United Kingdom",
},
new City {
Id = "UK05",
Name = "Liverpool",
Country = "United Kingdom",
},
new City {
Id = "US01",
Name = "New York",
Country = "United States of America",
},
new City {
Id = "US02",
Name = "Miami",
Country = "United States of America",
},
new City {
Id = "US03",
Name = "Philadelphia",
Country = "United States of America",
},
new City {
Id = "US04",
Name = "Chicago",
Country = "United States of America",
},
new City {
Id = "US05",
Name = "Springfield",
Country = "United States of America",
},
new City {
Id = "US06",
Name = "Los Angeles",
Country = "United States of America",
},
new City {
Id = "US07",
Name = "Houston",
Country = "United States of America",
},
new City {
Id = "US08",
Name = "Phoenix",
Country = "United States of America",
},
new City {
Id = "US09",
Name = "San Diego",
Country = "United States of America",
},
new City {
Id = "US10",
Name = "Dallas",
Country = "United States of America",
},
new City {
Id = "BG01",
Name = "Sofia",
Country = "Bulgaria",
},
new City {
Id = "BG02",
Name = "Plovdiv",
Country = "Bulgaria",
},
new City {
Id = "BG03",
Name = "Varna",
Country = "Bulgaria",
},
new City {
Id = "BG04",
Name = "Burgas",
Country = "Bulgaria",
},
new City {
Id = "IT01",
Name = "Rome",
Country = "Italy",
},
new City {
Id = "IT02",
Name = "Milan",
Country = "Italy",
},
new City {
Id = "IT03",
Name = "Naples",
Country = "Italy",
},
new City {
Id = "IT04",
Name = "Turin",
Country = "Italy",
},
new City {
Id = "IT05",
Name = "Palermo",
Country = "Italy",
},
new City {
Id = "IT06",
Name = "Florence",
Country = "Italy",
},
};
return data;
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
Para comenzar con el componente IgbCombo, primero debemos registrar su módulo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
razor
También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbCombo 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:
El componente IgbCombo no funciona con el elemento estándar <form>. En su lugar, utilice Formulario.
Luego, vincularemos una serie de objetos a la fuente de datos combinada utilizada para crear la lista de opciones.
<IgbComboId="basic-combo"DisplayKey="name"ValueKey="id"Data="Data" />@code {privateclassCity {
publicstring Id { get; set; }
publicstring Name { get; set; }
publicstring 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",
},
};
}razor
Valor de datos y propiedades de visualización
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:
ValueKey: opcional, obligatorio para objetos de datos complejos: determina qué campo de la fuente de datos se utilizará para realizar selecciones. Si se omite ValueKey, la API de selección utilizará referencias de objetos para seleccionar elementos.
DisplayKey: opcional, recomendado para objetos de datos complejos: determina qué campo de la fuente de datos se utiliza como valor de visualización. Si no se especifica ningún valor para DisplayKey, el combo utilizará la ValueKey especificada (si corresponde). En nuestro caso, queremos que el combo muestre el name de cada ciudad y use el campo id para la selección de elementos y como valor subyacente para cada elemento. Por lo tanto, proporcionamos estas propiedades a ValueKey y DisplayKey del combo respectivamente.
Cuando la fuente de datos consta de tipos primitivos (por ejemplo, cadenas, números, etc.), no especifique ValueKey y/o DisplayKey.
Fijando el valor
El componente ComboBox expone un captador y definidor Value además de un atributo, que también se denomina valor. Puede utilizar el atributo de valor para configurar los elementos seleccionados en la inicialización del componente.
Si desea leer el valor, es decir, la lista de elementos seleccionados actualmente, o actualizar el valor, utilice el captador y definidor de valores respectivamente. El captador de valores devolverá una lista de todos los elementos seleccionados representados por ValueKey. Del mismo modo, si desea actualizar la lista de elementos seleccionados utilizando el definidor de valores, debe proporcionar una lista de elementos por su ValueKey.
Ejemplo:
API de selección
El componente combinado expone API que le permiten cambiar los elementos seleccionados actualmente.
Además de seleccionar elementos de la lista de opciones mediante la interacción del usuario, puede seleccionar elementos mediante programación. Esto se hace mediante los métodos select y deselect. Puede pasar una variedad de elementos a ambos métodos. Si los métodos se llaman sin argumentos, todos los elementos se seleccionarán/deseleccionarán dependiendo del método que se llame. Si ha especificado una ValueKey para su componente combinado, entonces debe pasar las claves de valor de los elementos que desea seleccionar/deseleccionar:
Si se omite la propiedad ValueKey, deberá enumerar los elementos que desea seleccionar/deseleccionar como referencias de objetos:
EXAMPLE
MODULES
DATA
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Infragistics Blazor
builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule));
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections;
using System.Collections.Generic;
namespaceInfragistics.Samples
{
publicclassCity {
publicstring Id { get; set; }
publicstring Name { get; set; }
publicstring Country { get; set; }
}
publicclassSampleData {
publicstatic List<City> Cities = GetCities();
publicstatic List<City> GetCities() {
var data = new List<City> {
new City {
Id = "UK01",
Name = "London",
Country = "United Kingdom",
},
new City {
Id = "UK02",
Name = "Manchester",
Country = "United Kingdom",
},
new City {
Id = "UK03",
Name = "Birmingham",
Country = "United Kingdom",
},
new City {
Id = "UK04",
Name = "Glasgow",
Country = "United Kingdom",
},
new City {
Id = "UK05",
Name = "Liverpool",
Country = "United Kingdom",
},
new City {
Id = "US01",
Name = "New York",
Country = "United States of America",
},
new City {
Id = "US02",
Name = "Miami",
Country = "United States of America",
},
new City {
Id = "US03",
Name = "Philadelphia",
Country = "United States of America",
},
new City {
Id = "US04",
Name = "Chicago",
Country = "United States of America",
},
new City {
Id = "US05",
Name = "Springfield",
Country = "United States of America",
},
new City {
Id = "US06",
Name = "Los Angeles",
Country = "United States of America",
},
new City {
Id = "US07",
Name = "Houston",
Country = "United States of America",
},
new City {
Id = "US08",
Name = "Phoenix",
Country = "United States of America",
},
new City {
Id = "US09",
Name = "San Diego",
Country = "United States of America",
},
new City {
Id = "US10",
Name = "Dallas",
Country = "United States of America",
},
new City {
Id = "BG01",
Name = "Sofia",
Country = "Bulgaria",
},
new City {
Id = "BG02",
Name = "Plovdiv",
Country = "Bulgaria",
},
new City {
Id = "BG03",
Name = "Varna",
Country = "Bulgaria",
},
new City {
Id = "BG04",
Name = "Burgas",
Country = "Bulgaria",
},
new City {
Id = "IT01",
Name = "Rome",
Country = "Italy",
},
new City {
Id = "IT02",
Name = "Milan",
Country = "Italy",
},
new City {
Id = "IT03",
Name = "Naples",
Country = "Italy",
},
new City {
Id = "IT04",
Name = "Turin",
Country = "Italy",
},
new City {
Id = "IT05",
Name = "Palermo",
Country = "Italy",
},
new City {
Id = "IT06",
Name = "Florence",
Country = "Italy",
},
};
return data;
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Validación
El componente Ignite UI for Blazor Combo admite la mayoría de las IgbInput propiedades, como Required, Disabled, Autofocus, Invalid, etc. El componente también expone dos métodos enlazados a su validación:
reportValidity: comprueba la validez y devuelve verdadero si el componente satisface las restricciones de validación.
checkValidity: un contenedor alrededor de reportValidity para cumplir con la API de entrada nativa.
Navegación por teclado
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 teclas Inicio o Fin activará el primero o el último elemento de la lista.
Usando la tecla Espacio se seleccionará el elemento activo.
Usar la tecla Enter seleccionará el elemento activo y cerrará la lista de opciones.
Usar las teclas Esc o Tab/Shift + Tab cerrará la lista de opciones.
Estilo del cuadro combinado Blazor
Puede cambiar la apariencia del componente Ignite UI for Blazor IgbCombo y sus elementos mediante las partes CSS expuestas que se enumeran a continuación:
Partes CSS
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.
EXAMPLE
MODULES
DATA
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Infragistics Blazor
builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections;
using System.Collections.Generic;
namespaceInfragistics.Samples
{
publicclassCity {
publicstring Id { get; set; }
publicstring Name { get; set; }
publicstring Country { get; set; }
}
publicclassSampleData {
publicstatic List<City> Cities = GetCities();
publicstatic List<City> GetCities() {
var data = new List<City> {
new City {
Id = "UK01",
Name = "London",
Country = "United Kingdom",
},
new City {
Id = "UK02",
Name = "Manchester",
Country = "United Kingdom",
},
new City {
Id = "UK03",
Name = "Birmingham",
Country = "United Kingdom",
},
new City {
Id = "UK04",
Name = "Glasgow",
Country = "United Kingdom",
},
new City {
Id = "UK05",
Name = "Liverpool",
Country = "United Kingdom",
},
new City {
Id = "US01",
Name = "New York",
Country = "United States of America",
},
new City {
Id = "US02",
Name = "Miami",
Country = "United States of America",
},
new City {
Id = "US03",
Name = "Philadelphia",
Country = "United States of America",
},
new City {
Id = "US04",
Name = "Chicago",
Country = "United States of America",
},
new City {
Id = "US05",
Name = "Springfield",
Country = "United States of America",
},
new City {
Id = "US06",
Name = "Los Angeles",
Country = "United States of America",
},
new City {
Id = "US07",
Name = "Houston",
Country = "United States of America",
},
new City {
Id = "US08",
Name = "Phoenix",
Country = "United States of America",
},
new City {
Id = "US09",
Name = "San Diego",
Country = "United States of America",
},
new City {
Id = "US10",
Name = "Dallas",
Country = "United States of America",
},
new City {
Id = "BG01",
Name = "Sofia",
Country = "Bulgaria",
},
new City {
Id = "BG02",
Name = "Plovdiv",
Country = "Bulgaria",
},
new City {
Id = "BG03",
Name = "Varna",
Country = "Bulgaria",
},
new City {
Id = "BG04",
Name = "Burgas",
Country = "Bulgaria",
},
new City {
Id = "IT01",
Name = "Rome",
Country = "Italy",
},
new City {
Id = "IT02",
Name = "Milan",
Country = "Italy",
},
new City {
Id = "IT03",
Name = "Naples",
Country = "Italy",
},
new City {
Id = "IT04",
Name = "Turin",
Country = "Italy",
},
new City {
Id = "IT05",
Name = "Palermo",
Country = "Italy",
},
new City {
Id = "IT06",
Name = "Florence",
Country = "Italy",
},
};
return data;
}
}
}cs