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 algunsIgcComboComponent recursos que são ativados/desativados em tempo de execução:

    No nosso exemplo, vamos usar oIgcSwitchComponent componente, então precisamos importá-los junto com a combinação:

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

    Note que o agrupamento é habilitado/desativado ao definir agroupKey propriedade para um campo de origem 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, o filtro na ComboBox está ativado. Ele pode ser desativado ao configurar adisableFiltering propriedade.

    As opções de filtragem podem ser ainda mais aprimoradas ativando a sensibilidade de maiúsculas e minúsculas de busca. O ícone de diferencial de maiúsculas e minúsculas pode ser ativado usando acaseSensitiveIcon propriedade para que os usuários finais possam controlar a sensibilidade à maiúscula e minúscula.

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

    Opções de filtragem

    O Ignite UI for Web ComponentsIgcComboComponent expõe mais uma propriedade de filtragem que permite passar a configuração de ambasFilterKey as opções eCaseSensitive. IndicaFilterKey qual campo de origem de dados deve ser usado para filtrar a lista de opções. ACaseSensitive opção indica se o filtro deve ser sensível a maiúsculas e 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

    Definir umagroupKey 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 rótuloIgcComboComponent pode ser facilmente definido usando alabel 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 busca do ComboBox é focada por padrão. Para desativar esse recurso e mover o foco para a lista de opções, use aautofocusList propriedade mostrada 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 a ComboBox usando adisabled propriedade:

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

    API Reference

    Additional Resources