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

    The React Dropdown list is positioned relatively to its target. The target slot allows you to provide a built-in component which toggles the open property on click. In some cases you would want to use an external target or use another event to toggle the opening of the Dropdown. You can achieve this using the showTarget, hide and toggleTarget methods which allow you to provide the target as a parameter. By default, the Dropdown list uses absolute CSS position. You will need to set the IgrPositionStrategy of the React Dropdown to fixed when the target element is inside a fixed container, but the Dropdown is not. The Dropdown list is automatically sized based on its content, if you want the list to have the same width as the target, you should set the sameWidth property to true.

    Position

    The preferred placement of the React Dropdown can be set using the placement property. The default placement of the Dropdown is bottom-start. The flip property determines whether the placement should be flipped if there is not enough space to display the Dropdown at the specified placement. The distance from the React Dropdown list to its target can be specified using the distance property.

    선택

    The IgrDropdown emits the Change event when the user selects an item. The select method of the Dropdown allows you to select an item by its index or value.

    Item

    The IgrDropdownItem represents a selectable item in the Dropdown list. You could predefine a selected item by setting the selected property. You could also disable an item so that it can't be selected using the disabled property. The IgrDropdownItem has a default slot which allows you to specify the content of the item. You could also provide custom content to be rendered before or after the content using the prefix and suffix slots. The value property allows you to provide a custom value to an item. If the value is not set, it resolves to the text content of the item.

    You could use the IgrDropdownHeader to provide a header for a group of items.

    Group

    The React Dropdown's items can also be grouped using the IgrDropdownGroup, making it easier for users to differentiate separate categories. See it in action in this React Dropdown List example:

    Scroll Strategy

    The scrollStrategy property determines the behavior of the component during scrolling the container of the target element. The default value is scroll which means that the Dropdown will be scrolled with its target. Setting the property to block will block the scrolling if the Dropdown is opened. You could also set the property to close which means that the Dropdown will be closed automatically on scroll.

    Keep Open

    By default, the Dropdown is closed automatically when the user clicks outside of it or selects an item. You could prevent this behavior using the keepOpenOnOutsideClick and keepOpenOnSelect properties.

    Styling

    You can change the appearance of the Dropdown and its items, by using the exposed CSS parts. The IgrDropdown exposes base and list parts, the IgrDropdownItem exposes prefix, content and suffix parts and the IgrDropdownGroup exposes label part.

    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