Dropdown

사용자에게 허용된 선택 옵션만 제공하여 사용자가 데이터를 잘못 입력하는 것을 방지해 주는 요소입니다. 선택 시, 사용자가 하나의 옵션을 선택할 수 있는 목록을 제공합니다.

Anatomy

Anatomy

  • Container
  • Icon
  • Option
  • Field

Spec

  • Spacing

      Spacing

      좌측 정렬을 기본으로 합니다. 1개 이상의 필드를 사용해야 하며, 세로 간격은 패딩 44로 설정합니다.
  • State

      State

    • Default: 사용자가 정보를 선택하기 전 상태입니다.
    • Focused (PC only): 사용자가 필드를 눌러 정보를 선택 중일 때의 상태입니다. 해당 상태는 PC에서만 사용되며, 모바일에서는 시스템 UI가 사용됩니다.
  • Size

      Size

      가로 값은 유동적으로 조절이 가능하나, 높이는 고정 사이즈를 준수해야 합니다. MO와 PC를 구분하여 사용하도록 합니다.
    • L (H50, MO only)
    • M (H44, PC only)
    • S (H38)
    • XS_A (label)
    • XS_B (label, MO only)
© KYOBO BOOK CENTRE교보문고 바로가기