React ComboBox Features

    Ignite UI for React ComboBox 구성 요소는 필터링 및 그룹화와 같은 여러 기능을 제공합니다.

    콤보박스 기능 예

    다음 데모는 런타임 시 활성화/비활성화되는 일부 ComboBox 기능을 보여줍니다.

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    이 샘플에서는 구성 요소를 사용할 IgrSwitch 것이므로 콤보와 함께 가져와야 합니다.

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

    그런 다음 React의 useState 훅을 사용하여 스위치 상태가 변경될 때 업데이트될 변수를 선언합니다. 이렇게 하면 업데이트를 추적하고 그에 따라 콤보 입력에 대한 변경 사항이 반영됩니다.

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

    ​groupKey 속성을 해당 데이터 소스 필드로 설정하여 그룹화를 활성화/비활성화합니다.

    groupKey={groupingEnabled ? "country" : undefined}
tsx

    특징

    필터링

    기본적으로 ComboBox의 필터링은 활성화되어 있습니다. disableFiltering 속성을 설정하여 비활성화할 수 있습니다.

    검색 대소문자 구분을 활성화하면 필터링 옵션이 더욱 향상될 수 있습니다. 최종 사용자가 대소문자 구분을 제어할 수 있도록 caseSensitiveIcon 속성을 사용하여 대소문자 구분 아이콘을 설정할 수 있습니다.

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

    필터링 옵션

    Ignite UI for React ComboBox component는 둘 다의 구성을 전달할 수 있는 필터링 속성을 하나 더 노출합니다. FilterKey 그리고 CaseSensitive 옵션. 이 FilterKey 옵션 목록을 필터링하는 데 사용해야 하는 데이터 원본 필드를 나타냅니다. 이 CaseSensitive 옵션은 필터링이 대소문자를 구분해야 하는지 여부를 나타냅니다.

    다음 코드 조각은 이름 대신 국가별로 데이터 소스의 도시를 필터링하는 방법을 보여줍니다. 또한 기본적으로 필터링에서 대소문자를 구분하도록 설정하고 있습니다.

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

<IgrCombo filteringOptions={options} />
tsx

    그룹화

    ​groupKey 옵션을 정의하면 제공된 키에 따라 항목이 그룹화됩니다.

    <IgrCombo groupKey="region" />
tsx

    groupKey 속성은 데이터 소스가 복잡한 개체로 구성된 경우에만 효과가 있습니다.

    정렬 방향

    ComboBox 구성 요소는 그룹을 오름차순으로 정렬해야 하는지 내림차순으로 정렬해야 하는지 설정하는 옵션도 제공합니다. 기본적으로 정렬 순서는 오름차순입니다.

    <IgrCombo groupSorting="desc" />
tsx

    상표

    레이블은 IgrCombo 다음 속성을 사용하여 쉽게 설정할 수 있습니다. label​

    <IgrCombo label="Cities" />
tsx

    자리 표시자

    ComboBox 구성 요소 입력과 드롭다운 메뉴 내에 있는 검색 입력 모두에 대해 자리 표시자 텍스트를 지정할 수 있습니다.

    <IgrCombo placeholder="Pick a city" placeholderSearch="Search for a city" />
tsx

    자동 초점

    페이지 로드 시 ComboBox에 자동으로 초점을 맞추려면 다음 코드를 사용할 수 있습니다.

    <IgrCombo autofocus={true} />
tsx

    검색 입력 포커스

    ComboBox 검색 입력은 기본적으로 초점이 맞춰져 있습니다. 이 기능을 비활성화하고 옵션 목록으로 포커스를 이동하려면 아래와 같이 autofocusList 속성을 사용하십시오.

    <IgrCombo autofocusList={true} />
tsx

    필수의

    필수 속성을 설정하여 ComboBox를 필수로 표시할 수 있습니다.

    <IgrCombo required={true} />
tsx

    콤보박스 비활성화

    ​disabled 속성을 사용하여 ComboBox를 비활성화할 수 있습니다.

    <IgrCombo disabled={true} />
tsx
    Ignite UI for React | CTA 배너

    추가 리소스