컴포넌트 목록은 상황에 따라 추가, 삭제 및 디자인이 변경될 수 있습니다.
01. Timeline Section
시간의 흐름에 따른 정보를 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
01-1. Timeline Tree
처음 타임라인 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다.
타임라인 섹션 컴포넌트는 Timeline Tree
, Timeline List
2 가지 타입이 존재하며, Default는 트리형이다.
01-2. Timeline List
BUG - ICE4-4197Getting issue details... STATUS
BUG - ICE4-4196Getting issue details... STATUS
▶︎ 웹가이드 바로가기 : NEED CHECK
02. Gallery Section
이미지 정보를 강조하고자 할 때 사용 가능한 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
02-1. Swipe
처음 타임라인 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다.
갤러리 섹션 컴포넌트는 Swipe
, Grid
2 가지 타입이 존재하며, Default는 스와이프형이다.
02-2. Grid
NEED CHECK - ICE4-4198Getting issue details... STATUS
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/GallerySection
03. Table Section
정보를 테이블로 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
03-1. Free space no border
처음 테이블 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다. 테이블 섹션 컴포넌트는 Free space no border
, Classic with border
2 가지 타입이 존재하며, Default는 프리타입이다.
03-2. Classic with border
NEED CHECK - ICE4-4199Getting issue details... STATUS
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/TableSection
04. Chart Section
정보를 차트로 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
04-1. Compare Bar Chart
처음 차트 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다. Compare Bar Chart
, Circular
, Side by side
3 가지 타입이 존재하며, Default는 비교형 바 타입이다.
04-2. Circular
04-3. Side by side
NEED CHECK - ICE4-4200Getting issue details... STATUS
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/ChartSection
05. Countdown Section
카운트 다운 기능이 필요할 경우 사용하는 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
컴포넌트를 추가한 초기 화면은 다음과 같다.
NEED CHECK - ICE4-4201Getting issue details... STATUS
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/CountdownSection
06. Step Section
스텝을 강조하는 컨텐츠를 만들고자 할 경우, 스텝 섹션 컴포넌트를 활용할 수 있다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
06-1. Card Type
스텝 섹션 컴포넌트를 추가한 화면은 다음과 같다. Card
, Timeline
2 가지 타입이 존재하며, Default는 카드형이다.
06-2. Timeline Type
NEED CHECK - ICE4-4202Getting issue details... STATUS
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/StepSection
07. Upcoming Event
다가오는 이벤트를 표현하고자 할 경우, 사용 가능한 업커밍 이벤트 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
컴포넌트를 빌더에 처음 추가하면 다음과 같다.
NEED CHECK - ICE4-4203Getting issue details... STATUS
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/UpcomingEvent
08. SNS
SNS를 연결해야할 경우 SNS 섹션 컴포넌트를 사용할 수 있다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
컴포넌트를 추가한 초기화면은 다음과 같다.
Images
테이블에서 추가() 아이콘을 클릭하여 다음과 같이 내용을 입력하자.
NEED CHECK - ICE4-4204Getting issue details... STATUS
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Sns
09. Contact
컨텐츠 인터렉티브가 필요한 화면에서 컨텐츠 섹션 컴포넌트를 사용 할 수 있다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
09-1. Map Right
컴포넌트 추가 시 초기 화면은 다음과 같다. 타입은 Map Right
, Map Left
, Address Left
3가지가 있으며, 초기 Default는 지도가 오른쪽에 있는 타입이다.
09-2. Map Left
09-3. Address Left
모든 타입의 셋팅 화면은 동일하다. 주소를 직접 입력하거나, 좌표값을 넣어 셋팅 할 수 있다.
(❖ 현재 구글 라이브러리 연결은 안되어 있는 상태 입니다.)
Address :
15, Teheran-ro 10-gil, Gangnam-gu, Seoul
Location :
37.498344
,127.032778
Address | Location |
---|---|
지도 영역은 [Design] setting을 통해 다음과 같이 설정 할 수 있다.
버튼 영역을 클릭하여 이메일 액션을 별도로 설정 할 수 있다.
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Contact
10. Call To Action
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/CallToAction
11. Subscription
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Subscription
12. Card Section
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/CardSection
13. Banner Section
Swiper, Columns, Random 유형의 배너 섹션 사용 가능 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/BannerSection
14. Board NEW
상품리뷰, 갤러리, 블로그, Q&A, FAQ, 일반 게시판 Config 사용 가능 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 : NEED CHECK
15. Survey Form NEW
설문조사 Config 사용 가능 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 : NEED CHECK
16. Board Summary
대시보드에서 볼 수 있는 Board 요약 리스트 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
BUILDER CHECK 컴포넌트 누락됨(삭제?)
▶︎ 웹가이드 바로가기 : NEED CHECK