Web Components ComboBox Features

    O componente Ignite UI for Web Components 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:

    Em nossa amostra, vamos usar o IgcSwitchComponent componente, portanto, temos que registrá-lo junto com o combo:

    import { defineComponents, IgcComboComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcComboComponent, IgcSwitchComponent);

    let combo = document.getElementById('combo') as IgcComboComponent<City>;

let switchIcon = document.getElementById('caseSensitive') as IgcSwitchComponent;
let switchFilter = document.getElementById('filtering') as IgcSwitchComponent;
let switchDisable = document.getElementById('disabled') as IgcSwitchComponent;

switchIcon.addEventListener("igcChange", () => {
    combo.caseSensitiveIcon = switchIcon.checked;
});

switchFilter.addEventListener("igcChange", () => {
    combo.disableFiltering = switchIcon.disabled = switchFilter.checked;
});

switchDisable.addEventListener("igcChange", () => {
    combo.disabled = switchDisable.checked;
});

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

    let switchGroup = document.getElementById('grouping') as IgcSwitchComponent;

switchGroup.addEventListener("igcChange", () => {
    this.combo.groupKey = switchGroup.checked ? "country" : undefined;
});

    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.

    <igc-combo disable-filtering case-sensitive-icon></igc-combo>

    Opções de filtragem

    O componente Ignite UI for Web Components 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:

    const options = {
    filterKey: 'country',
    caseSensitive: true
};

combo.filteringOptions = options;

    Grouping

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

    <igc-combo group-key="region"></igc-combo>

    [!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:

    <igc-combo group-sorting="desc"></igc-combo>

    Label

    O IgcComboComponent rótulo pode ser definido facilmente usando a label propriedade:

    <igc-combo label="Cities"></igc-combo>

    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:

    <igc-combo placeholder="Pick a city" placeholder-search="Search for a city"></igc-combo>

    Autofocus

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

    <igc-combo autofocus></igc-combo>

    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:

    <igc-combo autofocus-list></igc-combo>

    Required

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

    <igc-combo required></igc-combo>

    Disable ComboBox

    Você pode desativar o ComboBox usando a disabled propriedade:

    <igc-combo disabled></igc-combo>

    API Reference

    Additional Resources