VerticalTimeLine¶
목적¶
VerticalTimeLine은 특정 사건을 연대별로 나타낼 수 있는 UI Object
주요 단계¶
1. VerticalTimeLine UI 생성¶
1.1. 원하는 Aggregation을 선택하여 VerticalTimeLine을 생성¶
<사진 1> VerticalTimeLine UI 설정 화면
2. VerticalTimeLine UI 속성¶
<사진 2> VerticalTimeLineItem 배치 및 속성(Attributes) 설정 화면
2.1. 주요 속성¶
| Name | Description |
|---|---|
| centerBarColorFrom | 중앙 바(Vertical Line)의 시작 그라디언트 색상 |
| centerBarColorTo | 중앙 바(Vertical Line)의 끝 그라디언트 색상 |
| headerTitle | VerticalTimeLine UI의 최상단 제목 설정 |
| visible | VerticalTimeLine의 표시 여부 설정 |
3. VerticalTimeLineItem 추가¶
VerticalTimeLine 내 입력할 수 있는 UI Object인 VerticalTimeLineItem을 생성
<사진 3> VerticalTimeLineItem 생성 팝업 화면
<사진 4> VerticalTimeLineItem 배치 및 속성(Attributes) 설정 화면
| Name | Description |
|---|---|
| itemCenterBarMonth | 중앙 원 내부 하단에 작은 글씨로 월(Month) 표시 |
| itemCenterBarYear | 중앙 원 내부 상단에 큰 글씨로 연도(Year) 표시 |
| itemHeaderDate | VerticalTimeLineItem 상단에 날짜 표기 |
| itemHeaderIcon | itemHeaderTitle 왼쪽에 아이콘 표시 |
| itemHeaderTime | VerticalTimeLineItem 상단에 시간 표기 |
| itemHeaderTitle | VerticalTimeLineItem 상단에 제목 표기 |
| itemPosition | 중앙 바를 기준으로 VerticalTimeLineItem 위치 지정 |
| visible | VerticalTimeLineItem의 표시 여부 설정 |
| expandable | VerticalTimeLineItem 접기/펼치기 기능 사용 여부 |
| expanded | true: 펼쳐진 상태로 표시, false: 접힌 상태로 표시 |
4. VerticalTimeLine UI 실행 결과¶
Web 화면에서 VerticalTimeLine UI Object가 정상적으로 표시되는 것을 확인할 수 있음
<사진 5> VerticalTimeLine 실행 결과 화면