11번가

Design System

Overflow Menu

오버플로우 메뉴(Overflow menu)는 사용자의 액션을 위해 화면 하단에 고정된 보조 콘텐츠를 포함하는 표면으로 주로 모바일에서 사용합니다.
연관된 콘텐츠 메뉴 또는 모바일의 간단한 대화 상자 대신 사용할 수 있습니다.

Types

오버플로우 메뉴는 화면 하단에서 노출되는 Component로 사용성에 따라 Type이 구분됩니다.
시트(Sheet)는 모바일에서 전체 너비이나 태블릿 또는 데스크톱에서 다른방법으로 노출될 수 있습니다.

Modal Component
  1. Modal Type : 사용자의 액션을 위해 하단에서 노출되는 Modal입니다.
  2. Drag Type : Handlebar를 사용자의 액션으로 시트영역을 상하로 확장하거나 축소하는 형태로 상호작용이 가능합니다.

Anatomy

Modal

  1. Scrim(모달 전용)
  2. Title(선택사항)
  3. Sheet
  4. Close Button
  5. Content

Drag

  1. Scrim(모달 전용)
  2. Title(선택사항)
  3. Sheet
  4. Handlebar
  5. Content

Interaction

Modal

닫기 버튼 또는 Dimmed 영역 터치 또는 페이지를 아래로 스크롤 시 Sheet를 닫을 수 있습니다.

Drag

핸들바를 사용하여 하단 시트를 확장할 수 있습니다.

Spec

Setting

모달시트 뒤의 모든 콘텐츠 및 UI 요소가 스크림을 표시하도록 하여 사용자 상호 작용에 응답하지 않음을 나타냅니다.

View

시트 높이가 Full일 경우 최소 높이 40을 유지합니다.

Placement

컨텐츠 내용에 따라 가변적으로 사용하고 좌우상단 16 패딩을 유지합니다.

Usage

오버플로우 메뉴는 나머지 화면과의 상호 작용을 차단하면서 일련의 선택 사항 또는 콘텐츠를 제공하기 때문에 시트(Sheet)에 스크림(Scrim)을 사용하여 사용자 상호 작용에 응답하지 않음을 나타냅니다. 오버플로우 메뉴는 모바일에서만 사용됩니다.

Do

화면의 나머지 부분과 상호 작용할 수 없음을 사용자에게 알리기 위해 모달 하단 시트 뒤에 스크림을 사용합니다.

Don't

모달 시트에 스크림을 사용하지 않으면 사용자가 화면의 상호작용에 혼동을 줄 수 있습니다.