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

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

    Ignite UI for React 드롭다운 구성 요소는 사전 정의된 값의 토글 목록을 표시하고 사용자가 클릭 한 번으로 단일 옵션 항목을 쉽게 선택할 수 있도록 합니다. React 드롭다운 메뉴로 작동하도록 빠르게 구성하거나 데이터를 그룹화하여 보다 유용한 시각적 정보를 제공하는 데 사용할 수 있습니다. 또한 그룹화를 사용하면 플랫 데이터와 계층적 데이터를 모두 사용할 수 있습니다.

    당사의 컴포넌트를 사용하면 프로젝트에 필요한 모든 기능과 사용자 정의 옵션(스타일 사용자 정의, React 드롭다운 배치 옵션, 템플릿, 헤더, 푸터, 본문, 목록 등에 표시되는 내용과 방법을 변경하는 기능 등)을 얻을 수 있습니다.

    React Dropdown Example

    다음 React Dropdown List 예제는 세 가지 기본 옵션 중에서 선택할 수 있는 간단한 대화형 React Dropdown 메뉴의 작동 방식을 보여줍니다. 작동 방식을 확인하세요.

    How to use the Dropdown List with Ignite UI for React

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

    npm install igniteui-react

    그런 다음 필요한 CSS를 IgrDropdown 가져오고 다음과 같이 모듈을 등록해야 합니다.

    import { IgrDropdown } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

    <IgrDropdown>
    <div slot="target">
        <IgrButton><span>Options</span></IgrButton>
    </div>
    <IgrDropdownItem><span>Option 1</span></IgrDropdownItem>
    <IgrDropdownItem><span>Option 2</span></IgrDropdownItem>
    <IgrDropdownItem><span>Option 3</span></IgrDropdownItem>
</IgrDropdown>

    Target

    React Dropdown 목록은 대상에 상대적으로 배치됩니다. target 슬롯을 사용하면 클릭 시 open 속성을 토글하는 기본 제공 구성 요소를 제공할 수 있습니다. 어떤 경우에는 외부 대상을 사용하거나 다른 이벤트를 사용하여 드롭다운 열기를 토글하고 싶을 것입니다. showTarget, hide 및 toggleTarget 메서드를 사용하여 대상을 매개변수로 제공할 수 있습니다. 기본적으로 드롭다운 목록은 absolute CSS 위치를 사용합니다. 대상 요소가 고정 컨테이너 내부에 있지만 드롭다운이 그렇지 않은 경우 React Dropdown의 IgrPositionStrategy​ ​fixed로 설정해야 합니다. 드롭다운 목록은 콘텐츠에 따라 자동으로 크기가 조정됩니다. 목록의 너비를 대상과 같게 하려면 sameWidth 속성을 true로 설정해야 합니다.

    Position

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

    선택

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

    Item

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

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

    Group

    React Dropdown의 항목은 IgrDropdownGroup 사용하여 그룹화할 수도 있어 사용자가 별도의 카테고리를 구분하기 쉽습니다. 이 React Dropdown List 예제에서 실제로 작동하는 모습을 확인하세요.

    Scroll Strategy

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

    Keep Open

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

    Styling

    노출된 CSS 부분을 사용하여 드롭다운 및 해당 항목의 모양을 변경할 수 있습니다. 이 IgrDropdown 노출 base 그리고 list parts, IgrDropdownItem 노출 prefix, content 그리고 suffix parts 및 IgrDropdownGroup 노출 label 부분.

    igc-dropdown::part(list) {
  height: 220px;
}

igc-dropdown-item[selected] {
  background: var(--ig-success-300);
}

igc-dropdown-group::part(label) {
  display: flex;
  justify-content: center;
}

    API Reference

    Additional Resources