Blazor ComboBox Features
El componente ComboBox Ignite UI for Blazor expone varias características, como el filtrado y la agrupación.
Ejemplo de características del cuadro combinado
La siguiente demostración muestra algunas funciones ComboBox
que se habilitan/deshabilitan en tiempo de ejecución:
¿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.
En nuestro ejemplo vamos a utilizar el componente IgbSwitch
, por lo que debemos registrarlo junto con el combo:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
razor
También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbSwitch
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" />
razor
<IgbCombo
Label="Cities"
Placeholder="Pick a city"
Data="Data"
ValueKey="Id"
DisplayKey="Name"
DisableFiltering="@DisableFiltering"
CaseSensitiveIcon="@CaseSensitiveIcon"
GroupKey="@Group"
Disabled="@Disabled">
</IgbCombo>
<IgbSwitch Change="@OnDisableFilteringClick">Disable Filtering</IgbSwitch>
<IgbSwitch Change="@OnCaseSensitiveClick" Disabled="@DisableFiltering">Show Case-sensitive Icon</IgbSwitch>
<IgbSwitch Change="@OnGroupClick">Enable Grouping</IgbSwitch>
<IgbSwitch Change="@OnDisableClick">Disable Combo</IgbSwitch>
@code {
private bool DisableFiltering = false;
private bool CaseSensitiveIcon = false;
private bool Disabled = false;
public void OnDisableFilteringClick(IgbComponentBoolValueChangedEventArgs e) {
IgbSwitch sw = e.Parent as IgbSwitch;
this.DisableFiltering = sw.Checked;
}
public void OnCaseSensitiveClick(IgbComponentBoolValueChangedEventArgs e) {
IgbSwitch sw = e.Parent as IgbSwitch;
this.CaseSensitiveIcon = sw.Checked;
}
public void OnDisableClick(IgbComponentBoolValueChangedEventArgs e) {
IgbSwitch sw = e.Parent as IgbSwitch;
this.Disabled = sw.Checked;
}
}
razor
Tenga en cuenta que la agrupación se habilita/deshabilita configurando la propiedad GroupKey
en un campo de fuente de datos correspondiente:
@code {
private string Group = "";
public void OnGroupClick(IgbComponentBoolValueChangedEventArgs e) {
IgbSwitch sw = e.Parent as IgbSwitch;
this.Group = sw.Checked ? "Country" : "";
}
}
razor
Características
Filtración
De forma predeterminada, el filtrado en ComboBox está habilitado. Se puede desactivar configurando la propiedad DisableFiltering
.
Las opciones de filtrado se pueden mejorar aún más habilitando la búsqueda entre mayúsculas y minúsculas. El icono que distingue entre mayúsculas y minúsculas se puede activar mediante la propiedad CaseSensitiveIcon
para que los usuarios finales puedan controlar la distinción entre mayúsculas y minúsculas.
<IgbCombo DisableFiltering="true" CaseSensitiveIcon="true" />
razor
Opciones de filtrado
El componente Ignite UI for Blazor ComboBox
expone una propiedad de filtrado más que permite pasar la configuración de ambas FilterKey
CaseSensitive
opciones. Indica FilterKey
qué campo de origen de datos se debe utilizar para filtrar la lista de opciones. La CaseSensitive
opción indica si el filtrado debe distinguir entre mayúsculas y minúsculas o no.
El siguiente fragmento de código muestra cómo filtrar las ciudades de nuestra fuente de datos por país en lugar de por nombre. También estamos haciendo que el filtrado distinga entre mayúsculas y minúsculas de forma predeterminada:
Agrupamiento
Al definir una opción GroupKey
se agruparán los elementos, según la clave proporcionada:
<IgbCombo GroupKey="region" />
razor
La propiedad GroupKey solo tendrá efecto si su fuente de datos consta de objetos complejos.
Dirección de clasificación
El componente ComboBox también expone una opción para establecer si los grupos deben ordenarse en orden ascendente o descendente. De forma predeterminada, el orden de clasificación es ascendente:
<IgbCombo GroupSorting="desc" />
razor
Etiqueta
La etiqueta IgbCombo
se puede configurar fácilmente usando la propiedad Label
:
<IgbCombo Label="Cities" />
razor
Marcador de posición
Se puede especificar un texto de marcador de posición tanto para la entrada del componente ComboBox como para la entrada de búsqueda ubicada dentro del menú desplegable:
<IgbCombo Placeholder="Pick a city" PlaceholderSearch="Search for a city" />
razor
Enfoque automático
Si desea que su ComboBox se centre automáticamente en la carga de la página, puede utilizar el siguiente código:
<IgbCombo Autofocus="true" />
razor
Enfoque de entrada de búsqueda
La entrada de búsqueda de ComboBox está enfocada de forma predeterminada. Para deshabilitar esta función y mover el foco a la lista de opciones, use la propiedad AutofocusList
como se muestra a continuación:
<IgbCombo AutofocusList="true" />
razor
Requerido
El ComboBox se puede marcar como requerido estableciendo la propiedad requerida.
<IgbCombo Required="true" />
razor
Deshabilitar cuadro combinado
Puede desactivar el ComboBox utilizando la propiedad Disabled
:
<IgbCombo Disabled="true" />
razor