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 드롭다운 목록은 목표에 상대적으로 배치되어 있습니다. 그target 슬롯은 내장된 컴포넌트를 제공하여 다음 기능을 토글할 수 있게 해줍니다.open Property on Click. 경우에 따라 외부 타겟을 사용하거나 다른 이벤트를 사용해 드롭다운 오프닝을 토글하고 싶을 수도 있습니다. 이 방법은 다음과 같이 할 수 있습니다.showTarget,hide 그리고toggleTarget이 메서드들은 타겟을 매개변수로 제공할 수 있게 해줍니다. 기본적으로 드롭다운 목록은 다음과 같이 사용됩니다.absolute CSS 자리. 다음 설정을 해야 합니다IgrPositionStrategy React의 드롭다운으로fixed 대상 요소가 고정된 컨테이너 안에 있지만 드롭다운이 없는 경우입니다. 드롭다운 리스트는 내용에 따라 자동으로 크기가 조정됩니다. 리스트가 목표와 같은 너비를 갖고 싶다면 다음 설정을 해야 합니다.sameWidth 속성은true.

    Position

    React 드롭다운의 선호 위치는 속성을 사용하여placement 설정할 수 있습니다. 드롭다운의 기본 위치는 다음과 같습니다bottom-start. 이 속성은flip 지정된 위치에 드롭다운을 표시할 공간이 부족할 경우 배치를 뒤집어야 하는지 결정합니다. React 드롭다운 리스트에서 목표 지점까지의 거리는 속성을distance 사용하여 지정할 수 있습니다.

    선택

    ​IgrDropdown사용자가 항목을 선택할 때 이벤트가Change 발생합니다. 드롭다운 메서드는select 항목을 인덱스나 값으로 선택할 수 있게 해줍니다.

    Item

    는IgrDropdownItem 드롭다운 목록에서 선택 가능한 항목을 나타냅니다. 속성을 설정selected 해 선택한 항목을 미리 정의할 수 있습니다. 또한 해당 속성을 사용disabled 해 아이템이 선택되지 않도록 비활성화할 수도 있습니다.IgrDropdownItem 기본 슬롯이 있어서 아이템의 내용을 지정할 수 있습니다. 또한 콘텐츠prefix 전후에 렌더링할 수 있는 커스텀 콘텐츠를 제공해 슬롯을 사용할suffix 수도 있습니다. 이 부동산은value 아이템에 맞춤형 가치를 부여할 수 있게 해줍니다. 만약 설정value 되어 있지 않으면, 항목의 텍스트 내용으로 해결됩니다.

    항목을IgrDropdownHeader 그룹별로 헤더로 지정할 수 있습니다.

    Group

    React 드롭다운의 항목은 또한 '를IgrDropdownGroup 사용해 그룹화할 수 있어, 사용자가 개별 카테고리를 구분하기가 더 쉬워집니다. 이 React 드롭다운 리스트 예시에서 실제 동작을 확인할 수 있습니다:

    Scroll Strategy

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

    Keep Open

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

    Styling

    노출된 CSS 부분을 사용해 드롭다운과 그 아이템의 외관을 변경할 수 있습니다. 그IgrDropdown 폭로자들base 그리고list 부분,IgrDropdownItem 폭로자들prefix,content 그리고suffix 부품 및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