React ComboBox Features

    O componente Ignite UI for React 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 IgrSwitch componente, portanto, temos que registrá-lo junto com o combo:

    import { IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch  } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrComboModule.register();
IgrSwitchModule.register();

    Em seguida, adicionaremos manipuladores de eventos a todos os componentes do switch para que possamos controlar os recursos de combinação alternando os switches:

    const comboRef = useRef<IgrCombo>(null);
const switchCaseSensitiveRef = useRef<IgrSwitch>(null);

const disableFiltering = (switchComponent: IgrSwitch) => {
    comboRef.current.disableFiltering =
    switchCaseSensitiveRef.current.disabled = switchComponent.checked;
};

const showCaseSensitiveIcon = (switchComponent: IgrSwitch) => {
    comboRef.current.caseSensitiveIcon = switchComponent.checked;
};

const disableCombo = (switchComponent: IgrSwitch) => {
    comboRef.current.disabled = switchComponent.checked;
};

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

    const enableGrouping = (switchComponent: IgrSwitch) => {
    comboRef.current.groupKey = switchComponent.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.

    <IgrCombo disableFiltering="true" caseSensitiveIcon="true"></IgrCombo>

    Opções de filtragem

    O componente Ignite UI for React 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
};

comboRef.current.filteringOptions = options;

    Grouping

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

    <IgrCombo 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:

    <IgrCombo groupSorting="desc" />

    Label

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

    <IgrCombo 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:

    <IgrCombo 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:

    <IgrCombo 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:

    <IgrCombo autofocusList="true" />

    Required

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

    <IgrCombo required="true" />

    Disable ComboBox

    Você pode desativar o ComboBox usando a disabled propriedade:

    <IgrCombo disabled="true" />

    Additional Resources