Popover
포커스한 것에 관한 정보 제공 요소인 Tooltip과 구분해 사용합니다.
Info에 대한 단순하고 빠른 정보 전달이 필요할 경우 Popover를 사용하되 변동성있는 서술적 정보에 관해서는 Sheets를 활용합니다.
Anatomy
Variants
Basic
Popover는 Layout에 따라 기본형인 Basic과 Bullet, Grid 세가지로 모두 타이틀 옵션을 적용하여 선택적으로 사용 가능합니다.
Basic은 팝오버의 가장 기본형으로 콘텐츠는 좌측 정렬로 사용합니다.
Bullet Within Contents
Bullet형은 콘텐츠 내용이 반복될 경우 점으로 분류하며, 콘텐츠 내용과 패딩 8을 적용하여 사용합니다.
Bullet은 2 x 2, Gray-400컬러로 사용합니다.
Grid Within Contents
Grid형은 콘텐츠 내용이 서브타이틀과 본문의 분류가 필요할 경우 패딩 16을 적용하며, 본문 텍스트는 간격 8을 적용하여 대표 정보와 그에 대한 설명으로 구성합니다.
Contents
본문은 필수이며 타이틀은 옵션 적용 가능합니다. 아래 사항 가이드를 유의해 사용합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Layout | Basic, Bullet, Grid | Basic |
| Contents | Default, With Title | Defualt |
Behaviors
Dismissing a popover
Popover는 Info아이콘을 눌렀을 때 노출됩니다. 우측 상단의 Close아이콘을 선택하여 닫을 수 있으며 노출된 상태에서 화면 내 외부 터치와 탭, 스크롤이 가능합니다.
단순하고 빠른 정보 전달이 필요할 경우 팝오버를 사용하되 버튼을 포함한 기능이나 변동성이 있는 정보에 관해서는 Modal를 활용합니다.
Usage Guidelines
Do : 팝오버는 Info 아이콘을 눌렀을 때 노출
Popover는 기본적으로 Info 아이콘을 사용하며 눌렀을 때 하단 기준 패딩 8을 두고 노출됩니다.
Do : 팝오버는 AD 아이콘을 눌렀을 때 노출
AD 아이콘을 눌렀을 때 하단 기준 패딩 8을 두고 노출됩니다.
Do : Solid형 Info 아이콘 사용
Popover는 기본적으로 Solid형의 Info아이콘을 사용합니다.
Don’t : Line형 Info 아이콘 사용 제한
Descriptive의 Line형의 Info 아이콘은 사용을 제한합니다.
Don’t : Background Dim 사용 제한
Popover 노출 시 이외 Background에 Black 또는 White Dim 사용을 제한합니다.
Don’t : Divider Line 사용 제한
Divider Line 사용이 필요한 부가적 상세정보는 Sheets로 처리하며 Popover에서 사용하는 것을 제한합니다.
Spec
Spacing
Popover는 Stroke 1, Gray-900, Radius 8의 Container로 구성되어 Info아이콘을 누른 상태에서 8의 간격을 두고 아래로 노출됩니다.
Alignment
Popover의 Contents와 Title은 모두 좌측 정렬되어야 합니다. 우측 Close button은 24 x 24사이즈로 Container 기준 상단 14, 우측 16 마진을 적용하여 고정적으로 사용합니다. Title 옵션이 없는 경우 Contents는 Close 아이콘 기준 16 패딩을 적용하여 사용합니다.
Padding
Title 옵션이 있는 경우 Contents와 Title의 간격은 8이며 Contents는 Container기준 16의 간격을 유지하여 내용을 구성합니다.
Title은 최대 2줄까지 표시되며 길이가 길 경우 ...으로 표시됩니다.
