Image Gallery
여러 이미지 정보를 한데 모아 보여주기 위한 이미지 컬렉션으로 이미지 썸네일에 특정 정보를 일부 함께 나타내어 사용 되어 집니다.
Anatomy
1. Severity Label
2. Image Container
3. Text Label
4. Label Container
Usage
Image Gallery는 정보의 유형과 상태에 따라 크게 아래 4가지로 분류합니다.
1. Default Image
2. Image with Severity
3. No Data
4. Image Empty
해당 컨탠츠가 가지고 있는 정보의 특성들로 4가지로 분류가 되며, 해당 4가지 모두 선택 되었을때의 Selected, Unfocused Status가 별도로 존재 하는 것이 특징입니다.
Default Image
기본적인 이미지 요소의 형태입니다.
Image with Severity
포함하고 있는 정보에서 Severity를 보유하고 있을때의 형태 입니다.
No Data
데이터가 존재하지 않는 상태입니다.
Image Empty
메타데이터는 존재하되, 이미지는 로딩이 되지 않는 형태 입니다.
Status
Alert는 정보의 구성에 따라 콘텐츠를 Container Alert, Text Alert 2가지로 분류합니다. Info Text와 Info Icon으로 구성된 Basic Info Box를 기본으로 합니다. Text Alert과 Container Alert는 정보에 대한 액션이 필요한 경우 사용합니다. 또한 정보를 함축·요약이 필요한 경우 사용합니다.
Default
기본적으로 이미지 갤러리에 접근했을때 표출 되는 방식입니다.
Focused
특정 이미지 컨탠츠에 집중시켜 해당 요소와 연관된 특정 Action을 하기 위한 상태입니다.
Unfocused
Focused와 함께 동작하는 형태로 집중된 하나의 요소외의 요소들을 집중도를 낮춰주는 역할을 합니다.
Spacing
Image Gallery의 이미지 사이즈는 부여된 화면마다의 갤러리 영역에 따라 Flexible 하게 변하며, 상하좌우 간격은 8px로 두는 것으로 합니다.
Contents
Severity Group
Gallery에 사용되는 Severity Badge의 경우 Circular Type으로 사용되어지며 갯수가 포함된 Count Severity Group과 갯수를 포함하지 않은 Severity Group 두가지로 분류되어 사용됩니다.
Text Label
이미지에 대한 정보를 이미지 하단에 Text로 제공하는 역할로 사용되어 집니다. 'Blade / Blade Side / R Value'의 정보를 표출합니다.