Blazor ComboBox Features

    El componente ComboBox Ignite UI for Blazor expone varias características, como el filtrado y la agrupación.

    Combobox Features Example

    La siguiente demostración muestra algunasIgbCombo funciones que están habilitadas o desactivadas en tiempo de ejecución:

    En nuestra muestra vamos a usar elIgbSwitch componente, así que tenemos que importarlos junto con el combo:

    // in Program.cs file

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

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

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

    Tenga en cuenta que el agrupamiento está habilitado/desactivado estableciendo laGroupKey propiedad en un campo fuente de datos correspondiente:

    @code {
    private string Group = "";

    public void OnGroupClick(IgbComponentBoolValueChangedEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.Group = sw.Checked ? "Country" : "";
    }
}

    Características

    Filtración

    Por defecto, el filtrado en el ComboBox está activado. Se puede desactivar configurando laDisableFiltering propiedad.

    Las opciones de filtrado pueden mejorarse aún más activando la sensibilidad de mayúsculas y minúsculas de búsqueda. El icono sensible a mayúsculas minúsculas puede activarse usando estaCaseSensitiveIcon propiedad para que los usuarios finales puedan controlar la sensibilidad a mayúsculas y minúsculas.

    <IgbCombo DisableFiltering="true" CaseSensitiveIcon="true" />

    Opciones de filtrado

    El Ignite UI for BlazorIgbCombo expone una propiedad de filtrado más que permite pasar la configuración de ambasFilterKey opciones yCaseSensitive. IndicaFilterKey qué campo fuente de datos debe usarse para filtrar la lista de opciones. LaCaseSensitive opción indica si el filtrado debe ser sensible a mayúsculas 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:

    Grouping

    Definir unaGroupKey opción agrupará los elementos, según la clave proporcionada:

    <IgbCombo GroupKey="region" />

    [!Note] The GroupKey property will only have effect if your data source consists of complex objects.

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

    Label

    LaIgbCombo etiqueta puede establecerse fácilmente usando laLabel propiedad:

    <IgbCombo Label="Cities" />

    Placeholder

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

    Autofocus

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

    Search Input Focus

    La entrada de búsqueda de ComboBox se enfoca por defecto. Para desactivar esta función y mover el foco a la lista de opciones, utilice laAutofocusList propiedad que se muestra a continuación:

    <IgbCombo AutofocusList="true" />

    Required

    El ComboBox se puede marcar como requerido estableciendo la propiedad requerida.

    <IgbCombo Required="true" />

    Disable ComboBox

    Puedes desactivar el ComboBox usando laDisabled propiedad:

    <IgbCombo Disabled="true" />

    Additional Resources