Blazor ComboBox Features

    O componente Ignite UI for Blazor ComboBox expõe vários recursos, como filtragem e agrupamento.

    Combobox Features Example

    A demonstração a seguir mostra alguns ComboBox recursos que são habilitados/desabilitados no tempo de execução:

    In our sample we are going to use the IgbSwitch component, so we have to import them together with the combo:

    // in Program.cs file

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

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbSwitch. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto 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;
    }
}

    Observe que o agrupamento é ativado/desativado definindo a GroupKey propriedade como um campo de fonte de dados correspondente:

    @code {
    private string Group = "";

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

    Características

    Filtragem

    Por padrão, a filtragem no ComboBox está habilitada. Ele pode ser desativado definindo a DisableFiltering propriedade.

    As opções de filtragem podem ser aprimoradas ainda mais ativando a diferenciação de maiúsculas e minúsculas de pesquisa. O ícone que diferencia maiúsculas de minúsculas pode ser ativado usando a propriedade para que os CaseSensitiveIcon usuários finais possam controlar a diferenciação de maiúsculas e minúsculas.

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

    Opções de filtragem

    O componente Ignite UI for Blazor ComboBox expõe mais uma propriedade de filtragem que permite passar a configuração de ambas e FilterKey​ ​CaseSensitive opções. O FilterKey indica qual campo de fonte de dados deve ser usado para filtrar a lista de opções. A CaseSensitive opção indica se a filtragem deve diferenciar maiúsculas de minúsculas ou não.

    O snippet de código a seguir mostra como filtrar as cidades de nossa fonte de dados por país em vez de nome. Também estamos tornando a filtragem sensível a maiúsculas e minúsculas por padrão:

    Grouping

    A definição de uma GroupKey opção agrupará os itens, de acordo com a chave fornecida:

    <IgbCombo GroupKey="region" />

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

    Direção de classificação

    O componente ComboBox também expõe uma opção para definir se os grupos devem ser classificados em ordem crescente ou decrescente. Por padrão, a ordem de classificação é crescente:

    <IgbCombo GroupSorting="desc" />

    Label

    O IgbCombo rótulo pode ser definido facilmente usando a Label propriedade:

    <IgbCombo Label="Cities" />

    Placeholder

    Um texto de espaço reservado pode ser especificado para a entrada do componente ComboBox e a entrada de pesquisa colocada dentro do menu suspenso:

    <IgbCombo Placeholder="Pick a city" PlaceholderSearch="Search for a city" />

    Autofocus

    Se você quiser que seu ComboBox seja focado automaticamente no carregamento da página, você pode usar o seguinte código:

    <IgbCombo Autofocus="true" />

    Search Input Focus

    A entrada de pesquisa ComboBox é focada por padrão. Para desativar esse recurso e mover o foco para a lista de opções, use a AutofocusList propriedade conforme mostrado abaixo:

    <IgbCombo AutofocusList="true" />

    Required

    O ComboBox pode ser marcado como necessário definindo a propriedade necessária.

    <IgbCombo Required="true" />

    Disable ComboBox

    Você pode desativar o ComboBox usando a Disabled propriedade:

    <IgbCombo Disabled="true" />

    Additional Resources