Web Components 드롭다운 목록 구성 요소 - 개요

    기능이 풍부한 Web Components 드롭다운 목록은 즉시 사용 가능한 필터링, 접근성, 미리 선택된 값, 유연한 데이터 바인딩, 그룹화, UI 사용자 정의 등을 제공합니다. 이 구성 요소가 실제로 수행하는 작업은 HTML 선택 태그를 효과적이고 쉽게 대체하여 사용자가 미리 정의된 여러 옵션 세트에서 편집할 수 없는 값을 빠르게 선택할 수 있도록 하는 것입니다.

    Ignite UI for Web Components 사전 정의된 값의 토글 목록을 표시하고 사용자가 클릭 한 번으로 단일 옵션 항목을 쉽게 선택할 수 있도록 합니다. Web Components 드롭다운 메뉴로 작동하도록 신속하게 구성할 수도 있고 데이터를 그룹화하여 더 유용한 시각적 정보를 전달하는 데 사용할 수도 있습니다. 또한 그룹화를 통해 단순 데이터와 계층적 데이터를 모두 사용할 수 있습니다.

    구성 요소를 사용하면 스타일 사용자 정의, Web Components 드롭다운 배치 옵션, 템플릿, 머리글, 바닥글, 본문, 목록 등에 표시되는 내용과 방법을 변경하는 기능 등 프로젝트에 필요한 모든 기능과 사용자 정의 옵션을 얻을 수 있습니다.

    Web Components 드롭다운 예

    다음 Web Components 드롭다운 목록 예는 선택할 수 있는 세 가지 기본 옵션과 함께 간단한 대화형 Web Components 드롭다운 메뉴를 실제로 사용하는 방법을 보여줍니다. 어떻게 작동하는지 확인하세요.

    Ignite UI for Web Components에서 드롭다운 목록을 사용하는 방법

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

    npm install igniteui-webcomponents
    import { defineComponents, IgcDropdownComponent } from "igniteui-webcomponents"; import 'igniteui-webcomponents/themes/light/bootstrap.css'; defineComponents(IgcDropdownComponent);

    Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.

    ​IgcDropdownComponent 사용을 시작하는 가장 간단한 방법은 다음과 같습니다.

    <igc-dropdown> <igc-button slot="target">Options</igc-button> <igc-dropdown-item>Option 1</igc-dropdown-item> <igc-dropdown-item>Option 2</igc-dropdown-item> <igc-dropdown-item>Option 3</igc-dropdown-item> </igc-dropdown>

    표적

    Web Components 드롭다운 목록은 대상을 기준으로 배치됩니다. 이 target slot 을 토글하는 내장 구성 요소를 제공할 수 있습니다. open 속성을 클릭합니다. 경우에 따라 외부 대상을 사용하거나 다른 이벤트를 사용하여 드롭다운 열기를 토글할 수 있습니다. 다음을 사용하여 이를 달성할 수 있습니다. showTarget, hide 그리고 toggleTarget 대상을 매개변수로 제공할 수 있는 메서드입니다. 기본적으로 드롭다운 목록은 absolute CSS 위치. 를 설정해야 합니다. IgcPositionStrategy의 Web Components 드롭다운을 fixed 대상 요소가 고정 컨테이너 내부에 있지만 드롭다운은 그렇지 않은 경우. 드롭다운 목록은 내용에 따라 자동으로 크기가 조정되며, 목록의 너비가 대상과 같도록 하려면 sameWidth 속성을 true.

    위치

    Web Components 드롭다운의 기본 위치는 placement 속성을 사용하여 설정할 수 있습니다. Dropdown의 기본 배치는 bottom-start 입니다. flip 속성은 지정된 배치에 드롭다운을 표시할 공간이 충분하지 않은 경우 배치를 뒤집을지 여부를 결정합니다. Web Components 드롭다운 목록에서 대상까지의 거리는 distance 속성을 사용하여 지정할 수 있습니다.

    선택

    사용자가 IgcDropdownComponent 항목을 선택할 때 이벤트를 내보냅니다 Change. select Dropdown의 방법을 사용하면 인덱스 또는 값으로 항목을 선택할 수 있습니다.

    안건

    ​IgcDropdownItemComponent는 드롭다운 목록에서 선택 가능한 항목을 나타냅니다. selected 속성을 설정하여 선택한 항목을 미리 정의할 수 있습니다. disabled 속성을 사용하여 항목을 선택할 수 없도록 항목을 비활성화할 수도 있습니다. IgcDropdownItemComponent 에는 항목의 콘텐츠를 지정할 수 있는 기본 슬롯이 있습니다. prefix 및 suffix 슬롯을 사용하여 콘텐츠 앞이나 뒤에 렌더링할 사용자 지정 콘텐츠를 제공할 수도 있습니다. value 속성을 사용하면 항목에 사용자 정의 값을 제공할 수 있습니다. value 설정되지 않은 경우 항목의 텍스트 콘텐츠로 확인됩니다.

    ​IgcDropdownHeaderComponent 사용하여 항목 그룹에 대한 헤더를 제공할 수 있습니다.

    그룹

    Web Components 드롭다운의 항목은 IgcDropdownGroupComponent 사용하여 그룹화할 수도 있으므로 사용자가 별도의 범주를 더 쉽게 구별할 수 있습니다. 이 Web Components 드롭다운 목록 예에서 실제로 작동하는 모습을 확인하세요.

    스크롤 전략

    ​scrollStrategy 속성은 대상 요소의 컨테이너를 스크롤하는 동안 구성 요소의 동작을 결정합니다. 기본값은 scroll 입니다. 이는 드롭다운이 대상과 함께 스크롤됨을 의미합니다. 속성을 block으로 설정하면 드롭다운이 열리면 스크롤이 차단됩니다. 또한 스크롤할 때 드롭다운이 자동으로 close 도록 속성을 설정할 수도 있습니다.

    계속 열어두세요

    기본적으로 드롭다운은 사용자가 드롭다운 외부를 클릭하거나 항목을 선택하면 자동으로 닫힙니다. keepOpenOnOutsideClick 및 keepOpenOnSelect 속성을 사용하면 이 동작을 방지할 수 있습니다.

    스타일링

    노출된 CSS 부분을 사용하여 드롭다운 및 해당 항목의 모양을 변경할 수 있습니다. IgcDropdownComponent는 base 및 list 부분을 노출하고, IgcDropdownItemComponent​ ​prefix, content 및 suffix 부분을 노출하고, IgcDropdownGroupComponent​ ​label 부분을 노출합니다.

    API 참조

    추가 리소스