Skip to Content
PatternsDesign PatternsUI DesignSide Panel

Side Panel

Definition

목록을 선택했을때 우측에서 해당 목록에 대한 정보를 보여주는 패널이 나타납니다. 패널은 접거나 펼칠 수 있습니다.

Anatomy

Side panel anatomy
  1. Split Bar
  2. Side Panel Top: 닫기 버튼이 존재합니다.
  3. Side Panel Bottom (Optional): Side panel의 전체 내용에 적용되는 Button Group이 존재합니다.

Size

기본 사이즈이자 최소 사이즈는 360px입니다. Split Bar를 이용하여 Side Panel의 너비를 조정할 수 있습니다.

Side panel sizing with split bar