Expansion Panel

Expansion Panel은 페이지에서 쉽게 접었다 폈다 (Expanded & Collapsed) 가능한 Panel의 형태 입니다.

Anatomy

Usage

Zoomable의 대표적인 Side Expansion Panel은 OSD Viewer의 작업시 사용되는 작업 패널로, Panel 내의 Contents는 목적에 따라서 다양한 Components의 조합으로 구성되어져 사용 될 수 있습니다. Side Expansion Panel의 경우 주로 페이지의 좌우 Side 중 한곳에 위치하는 것이 특징입니다.

Side Expansion Panel

Vertical 형태로 Panel 영역 안에서 페이지에서 수행 할 수 있는 작업을 할 수 있는 영역으로 구성되어져 있습니다. 하단에 Button영역을 별도로 가지고 있는 것이 특징입니다.

Variants

Panel Fold

Side Panel의 경우 사용의 용도에 따라 접었다 필 수 있으며, 해당 Action을 수행 할 수 있는 Icon Button의 경우 Panel 가장자리를 Hover시 표출 되는 것이 특징입니다. 해당 경우 GNB와 다르게 접혀진 형태가 아이콘 버튼 하나로 표출되는 것이 특징입니다.

Scroll Bar

Panel에 표출되는 Item이 화면의 영역을 넘어 갈때, Scroll Bar가 생성되며, Item의 영역 기준으로 Scroll Area가 생성되는 것이 특징입니다.

Table of Figma Properties - Expansion Panel / OSD Viewer Panel

Property	Values	Default Value
Type	Defect Panel, Photo Panel	None
Empty	False, True	False
Position	Full, Screen	Screen

Table of Figma Properties - Expansion Panel / OSD Viewer Panel / Entry Type

Property	Values	Default Value
Type	Dropdown, Severity Filter, Short Input, Slider with Input, Toggle with Input, Checkbox, Range, Slider with Input (Reset)	None

Table of Figma Properties - Expansion Panel / OSD Viewer Panel / List

Property	Values	Default Value
State	Default, Hover, Selected, Select Hover	Default