Blazor 콤보박스 개요

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

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

    Blazor ComboBox Example

    Getting Started with Blazor ComboBox

    ​IgbCombo 구성 요소를 시작하려면 먼저 다음과 같이 해당 모듈을 등록해야 합니다.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));

    또한 IgbCombo 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치되어야 합니다.

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    [!WARNING] The IgbCombo component doesn't work with the standard <form> element. Use IgbForm instead.

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

    <IgbCombo Id="basic-combo" DisplayKey="name" ValueKey="id" Data="Data" />

@code {
    private class City {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }

    private List<City> Data = new List<City> {
        new City {
            Id = "UK01",
            Name = "London",
            Country = "United Kingdom",
        },
        new City {
            Id = "BG01",
            Name = "Sofia",
            Country = "Bulgaria",
        },
        new City {
            Id = "US01",
            Name = "New York",
            Country = "United States",
        },
    };
}

    Data value and display properties

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

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

    [!Note] 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로 항목 목록을 제공해야 합니다.

    Example:

    Selection API

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

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

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

    <IgbCombo
    @ref="Combo"
    Label="Cities"
    Placeholder="Pick a city"
    Data="Data"
    ValueKey="Id"
    DisplayKey="Name">
</IgbCombo>

@code {
    private List<City> Data;
    private IgbCombo Combo;
    private object[] Cities;

    protected override void OnInitialized() {
        this.Data = SampleData.Cities;
        this.Cities = new object[] { "UK01", "UK02", "UK03", "UK04", "UK05" };
    }

    public void SelectCities() {
        this.Combo.Select(Cities);
    }

    public void DeselectCities() {
        this.Combo.Deselect(Cities);
    }
}

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

    @code {
    public void SelectAll() {
        this.Combo.Select(new object[] {});
    }

    public void DeselectAll() {
        this.Combo.Deselect(new object[] {});
    }
}

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

    Validation

    Ignite UI for Blazor 구성 요소는 Required, Disabled, Autofocus, Invalid 등과 같은 대부분의 IgbInput 속성을 지원합니다. 또한 구성 요소는 유효성 검사에 바인딩된 두 가지 메서드를 노출합니다.

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

    Keyboard Navigation

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

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

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

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

    Styling Blazor ComboBox

    Ignite UI for Blazor의 모양을 변경할 수 있습니다. IgbCombo 아래 나열된 노출된 CSS 부분을 사용하여 구성 요소 및 해당 항목:

    CSS Parts

    부품명 설명
    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 빈 콘텐츠를 담는 컨테이너입니다.

    API Reference

    Additional Resources