Dropdown - Design System Component

드롭다운 구성 요소를 사용하여 스크롤 가능한 목록에서 사용자 상호 작용 시 표시되는 컬렉션에서 항목을 선택할 수 있도록 합니다. 한 번에 하나의 항목만 선택할 수 있으며 시나리오에서 여러 항목을 선택해야 하는 경우 콤보를 대신 사용해야 합니다. 드롭다운은 Ignite UI for Angular 드롭다운 컴포넌트와 시각적으로 동일합니다

Sizes

드롭다운은 대형, 중형, 소형의 세 가지 크기로 제공됩니다.

Items

드롭다운은 헤더와 항목의 두 가지 유형의 항목을 지원합니다. 헤더를 통해 다른 항목을 그룹으로 구성 할 수 있습니다.

Item States

드롭다운 항목은 Idle(유휴), Disabled(사용 안 함), Focused(집중됨), Selected(선택 됨) 및 Selected(선택됨) 및 Focused(집중됨)의 5가지 상태를 지원합니다. Figma에서 상태는 Selected 및 Disabled에 대한 속성 및/또는 부울 속성을 변경 State 하여 얻을 수 있는 다양한 변형입니다. Sketch 에서는 이를 통해 Symbol Overrides 달성되는 반면, Adobe XD에서는 패러다임을 사용하여 Component States 상태를 쉽게 전환할 수 있습니다.

Item Layout Template

드롭다운 항목은 유연한 아이콘 및 레이블 템플릿을 지원합니다. Sketch에서 아이콘을 표시하려면 해당 오버라이드를 아이콘/매체로 설정해야 하며 스마트 레이아웃 규칙이 항목 레이아웃을 자동으로 조정합니다. Adobe XD에서 아이콘 레이어를 표시하고 스택에 남겨 레이아웃을 자동으로 조정하면 동일한 작업이 가능하지만, 콘텐츠에 아이콘이 있는 항목이 필요하지 않은 경우 아이콘 레이어를 삭제하기만 하면 됩니다. Figma 에서는 하나 이상의 항목을 선택하고 및/또는 Suffix Icon 속성을 활성화하여 드롭다운에 Prefix Icon 접두사 및 접미사 아이콘을 추가할 수 있습니다.

스타일링

드롭다운에는 배경색에 대한 스타일 유연성은 물론 항목 및 헤더 배경, 텍스트 색상 등 포함된 요소와 관련된 다양한 옵션이 제공됩니다.

Usage

드롭다운을 사용할 때 항상 표시를 트리거하는 항목 뒤의 콘텐츠 위에 표시해야 합니다. 드롭다운은 확장 패널처럼 콘텐츠를 푸시하지 않습니다.

하다	하지 않다

쓰러지 다