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 nosso exemplo, vamos usar o IgrSwitch componente, então temos que importá-los junto com o combo:

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

    Em seguida, usando o gancho useState do React, declararemos nossas variáveis que serão atualizadas quando o estado dos switches mudar. Isso acompanhará as atualizações e refletirá as alterações nas entradas do combo de acordo:

    const [disableFiltering, setDisableFiltering] = useState(false);
const [caseSensitiveIcon, setCaseSensitiveIcon] = useState(false);
const [groupingEnabled, setGroupingEnabled] = useState(false);
const [comboDisabled, setComboDisabled] = useState(false);

<IgrCombo
    valueKey="id"
    displayKey="name"
    label="Cities"
    placeholder="Pick a city"
    placeholderSearch="Search for a city"
    data={Cities}
    disableFiltering={disableFiltering}
    caseSensitiveIcon={caseSensitiveIcon}
    groupKey={groupingEnabled ? "country" : undefined}
    disabled={comboDisabled}>
</IgrCombo>


<IgrSwitch checked={disableFiltering} onChange={e => setDisableFiltering(e.detail.checked)}>
    <span>Disable Filtering</span>
</IgrSwitch>
<IgrSwitch checked={caseSensitiveIcon} onChange={e => setCaseSensitiveIcon(e.detail.checked)}>
    <span>Show Case-sensitive Icon</span>
</IgrSwitch>
<IgrSwitch checked={groupingEnabled} onChange={e => setGroupingEnabled(e.detail.checked)}>
    <span>Enable Grouping</span>
</IgrSwitch>
<IgrSwitch checked={comboDisabled} onChange={e => setComboDisabled(e.detail.checked)}>
    <span>Disable Combo</span>
</IgrSwitch>

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

    groupKey={groupingEnabled ? "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
};

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