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

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

    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>

    Note que o agrupamento é habilitado/desativado ao definir agroupKey propriedade para um campo de origem de dados correspondente:

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

    <IgrCombo disableFiltering={true} caseSensitiveIcon={true}></IgrCombo>

    Opções de filtragem

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

<IgrCombo filteringOptions={options} />

    Grouping

    Definir umagroupKey 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 rótuloIgrCombo pode ser facilmente definido usando alabel 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 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:

    <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 a ComboBox usando adisabled propriedade:

    <IgrCombo disabled={true} />

    Additional Resources