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

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

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

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

    Web Components 드롭다운 예제

    다음 Web Components 드롭다운 목록 예제에서는 세 가지 기본 옵션 중에서 선택할 수 있는 간단한 대화형 Web Components 드롭다운 메뉴를 사용하는 방법을 보여 줍니다. 작동 방식을 확인하십시오.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    Ignite UI for Web Components와 함께 드롭다운 목록을 사용하는 방법

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

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

defineComponents(IgcDropdownComponent);
ts

    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>
html

    표적

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    위치

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

    EXAMPLE
    TS
    HTML
    DropDownPositionStyles.css
    index.css
    Edit in:

    선택

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

    안건

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    그룹

    Web Components 드롭다운의 항목을 사용하여 IgcDropdownGroupComponent 그룹화할 수도 있으므로 사용자가 별도의 범주를 쉽게 구분할 수 있습니다. 이 Web Components 드롭다운 목록 예제에서 작동 방식을 확인하십시오.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    스크롤 전략

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

    계속 열어두세요

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

    Ignite UI for Web Components | CTA 배너

    스타일링

    노출된 CSS 부분을 사용하여 드롭다운 및 해당 항목의 모양을 변경할 수 있습니다. IgcDropdownComponent는 base 및 list 부분을 노출하고, IgcDropdownItemComponent​ ​prefix, content 및 suffix 부분을 노출하고, IgcDropdownGroupComponent​ ​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;
}
css

    EXAMPLE
    TS
    HTML
    DropDownStyling.css
    index.css
    Edit in:

    API 참조

    추가 리소스