Web Components ComboBox 개요

    Web Components ComboBox는 사용자가 제공된 목록에서 미리 정의된 다양한 옵션을 쉽게 선택, 필터링 및 그룹화할 수 있는 경량 편집기입니다. 이 구성 요소는 Web Components ComboBox 키보드 탐색 옵션, 항목, 머리글 및 바닥글이 표시되는 방식을 사용자 지정하는 템플릿도 지원합니다.

    Ignite UI for Web Components ComboBox 구성 요소는 사용자가 선택할 수 있는 옵션 목록을 제공합니다. 모든 옵션을 가상화된 항목 목록에 표시하므로 ComboBox는 하나 이상의 옵션을 선택할 수 있는 수천 개의 레코드를 동시에 표시할 수 있습니다. 또한 이 구성 요소는 대소문자 구분 필터링, 그룹화, 복잡한 데이터 바인딩 등을 제공합니다.

    Web Components ComboBox Example

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Getting Started with Web Components ComboBox

    먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

    npm install igniteui-webcomponents
cmd

    구성 요소를 사용하기 ComboBox 전에 추가 구성 요소 및 필요한 CSS와 함께 등록해야 합니다.

    import { defineComponents, IgcComboComponent }
from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcComboComponent);
ts

    Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    The IgcComboComponent component doesn't work with the standard <form> element. Use Form instead.

    그런 다음 옵션 목록을 작성하는 데 사용되는 콤보 데이터 소스에 개체 배열을 바인딩합니다.

    interface City {
    id: string;
    name: string;
}

const cities: City[] = [
    { name: 'London', id: 'UK01' },
    { name: 'Sofia', id: 'BG01'},
    { name: 'New York', id: 'NY01'}
];

export class Sample {
    private combo: IgcComboComponent<City>;

    constructor() {
        this.combo = document.getElementById('basic-combo') as IgcComboComponent<City>;
        this.combo.data = cities;
    }
}
ts
    <igc-combo id='basic-combo' display-key='name' value-key='id' value='["BG01"]'></igc-combo>
html

    Data value and display properties

    콤보가 복잡한 데이터(예: 개체) 목록에 바인딩된 경우 컨트롤이 항목 선택을 처리하는 데 사용할 속성을 지정해야 합니다. 구성 요소는 다음 속성을 노출합니다.

    • valueKey-선택 과목, 필수의 복잡한 데이터 객체의 경우- 선택하는 데 사용할 데이터 소스의 필드를 결정합니다. 만약에 valueKey 생략되면 선택 API는 개체 참조를 사용하여 항목을 선택합니다.
    • displayKey-선택 과목, 추천 복잡한 데이터 객체의 경우- 표시 값으로 사용되는 데이터 소스의 필드를 결정합니다. 값이 지정되지 않은 경우 displayKey, 콤보는 지정된 valueKey (만약에 어떠한). 우리의 경우 콤보가 다음을 표시하기를 원합니다. name 각 도시의 id 항목 선택을 위한 필드와 각 항목의 기본 값으로 사용됩니다. 따라서 우리는 이러한 속성을 콤보의 속성에 제공합니다. valueKey 그리고 displayKey 각기.

    When the data source consists of primitive types (e.g. strings, numbers, etc.), do not specify a valueKey and/or displayKey.

    Setting Value

    ComboBox 구성 요소는 값이라고도 하는 속성 외에도 value getter 및 setter를 노출합니다. value 속성을 사용하여 구성 요소 초기화 시 선택한 항목을 설정할 수 있습니다.

    값(즉, 현재 선택된 항목의 목록)을 읽거나 값을 업데이트하려면 각각 value getter 및 setter를 사용하십시오. 값 getter는 valueKey로 표시되는 선택된 모든 항목의 목록을 반환합니다. 마찬가지로, 값 설정기를 사용하여 선택한 항목 목록을 업데이트하려면 해당 valueKey로 항목 목록을 제공해야 합니다.

    본보기:

    const combo = document.getElementById('basic-combo') as IgcComboComponent<City>;

// Given the overview example from above this will return ['BG01']
console.log(combo.value);

// Change the selected items to New York and London
combo.value = ['NY01', 'UK01'];
ts

    Selection API

    콤보 구성 요소는 현재 선택한 항목을 변경할 수 있는 API를 노출합니다.

    사용자 상호 작용을 통해 옵션 목록에서 항목을 선택하는 것 외에도 프로그래밍 방식으로 항목을 선택할 수 있습니다. 이는 select 및 deselect 메소드를 통해 수행됩니다. 항목 배열을 두 메서드 모두에 전달할 수 있습니다. 인수 없이 메서드를 호출하면 호출되는 메서드에 따라 모든 항목이 선택/선택 취소됩니다. 콤보 구성 요소에 대해 valueKey 지정한 경우 선택/선택 취소하려는 항목의 값 키를 전달해야 합니다.

    일부 항목 선택/선택 취소:

    // Select/deselect items by their IDs as valueKey is set to 'id'
combo.select(['BG01', 'BG02', 'BG03', 'BG04']);
combo.deselect(['BG01', 'BG02', 'BG03', 'BG04']);
ts

    모든 항목 선택/선택 취소:

    // Select/deselect all items
combo.select();
combo.deselect();
ts

    ​valueKey 속성이 생략된 경우 개체 참조로 선택/선택 취소하려는 항목을 나열해야 합니다.

    // Select/deselect values by object references when no valueKey is provided
combo.select([cities[1], cities[5]]);
combo.deselect([cities[1], cities[5]]);
ts

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Validation

    Ignite UI for Web Components Combo 구성 요소는 , disabled, autofocus,등과 invalid 같은 required 대부분의 IgcInputComponent 속성을 지원합니다. 또한 구성 요소는 유효성 검사에 바인딩된 두 가지 메서드를 노출합니다.

    • reportValidity- 유효성을 확인하고 구성 요소가 유효성 검사 제약 조건을 충족하면 true를 반환합니다.
    • checkValidity- 기본 입력 API를 준수하기 위한 reportValidity 주변의 래퍼입니다.
    Ignite UI for Web Components | CTA Banner

    Keyboard Navigation

    콤보 구성요소에 초점이 맞춰져 있고 옵션 목록이 표시되지 않는 경우:

    • ​Down/Alt + Down 키를 사용하여 옵션 목록을 엽니다.

    콤보 구성요소에 초점이 맞춰져 있고 옵션 목록이 표시되는 경우:

    • ​아래쪽 키를 사용하면 목록의 다음 항목이 활성화됩니다.
    • ​위쪽 키를 사용하면 목록의 이전 항목이 활성화됩니다. 첫 번째 항목이 이미 활성화되어 있으면 입력에 초점을 맞춥니다.
    • ​Home 또는 End 키를 사용하면 목록의 첫 번째 또는 마지막 항목이 활성화됩니다.
    • ​스페이스 키를 사용하면 활성 항목이 선택됩니다.
    • ​Enter 키를 사용하면 활성 항목이 선택되고 옵션 목록이 닫힙니다.
    • ​Esc 또는 Tab/Shift + Tab 키를 사용하면 옵션 목록이 닫힙니다.

    Styling

    아래 나열된 노출된 CSS 부분을 사용하여 구성 요소와 해당 항목의 모양을 IgcComboComponent 변경할 수 있습니다.

    부품명 설명
    label 캡슐화된 텍스트 레이블입니다.
    input 기본 입력 필드입니다.
    native-input 기본 입력 필드의 기본 입력입니다.
    prefix 접두사 래퍼.
    suffix 접미사 래퍼.
    toggle-icon 토글 아이콘 래퍼.
    clear-icon 명확한 아이콘 래퍼.
    case-icon 필터 입력의 접미사 내부에 콘텐츠를 렌더링하는 케이스 아이콘 래퍼입니다.
    helper-text 도우미 텍스트 래퍼입니다.
    search-input 검색 입력 필드입니다.
    list-wrapper 옵션 래퍼 목록입니다.
    list 옵션 상자 목록입니다.
    item 옵션 목록의 각 항목을 나타냅니다.
    group-header 옵션 목록의 각 헤더를 나타냅니다.
    active 항목이 활성화되면 항목 부품 목록에 추가됩니다.
    selected 항목을 선택하면 항목 부품 목록에 추가됩니다.
    checkbox 각 목록 항목의 각 확인란을 나타냅니다.
    checkbox-indicator 각 목록 항목의 확인란 표시를 나타냅니다.
    checked 확인란을 선택하면 확인란 부품 목록에 추가됩니다.
    header 헤더 내용을 담고 있는 컨테이너입니다.
    footer 바닥글 콘텐츠를 담는 컨테이너입니다.
    empty 빈 콘텐츠를 담는 컨테이너입니다.

    CSS 부분을 사용하여 콤보 스타일을 완전히 제어할 수 있습니다.

    igc-combo::part(search-input) {
  background-color: var(--ig-gray-100);
  border-radius: 2px;
}

igc-combo::part(input) {
  background-color: var(--ig-gray-100);
}

igc-combo::part(prefix) {
  background-color: var(--ig-secondary-50);
  color: var(--ig-primary-500);
}

igc-combo::part(toggle-icon) {
  color: var(--ig-primary-500);
}
css

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API Reference

    Additional Resources