컴포넌트 목록은 상황에 따라 추가, 삭제 및 디자인이 변경될 수 있습니다.
Table of Contents |
---|
...
...
01. Timeline Section
시간의 흐름에 따른 정보를 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
01-1. Timeline Tree
처음 타임라인 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다.
...
이미지 정보를 강조하고자 할 때 사용 가능한 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
02-1. Swipe
처음 타임라인 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다.
...
정보를 테이블로 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
03-1. Free space no border
...
정보를 차트로 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
04-1. Compare Bar Chart
처음 차트 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다. Compare Bar Chart
, Circular
, Side by side
3 가지 타입이 존재하며, Default는 비교형 바 타입이다.
...
카운트 다운 기능이 필요할 경우 사용하는 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
컴포넌트를 추가한 초기 화면은 다음과 같다.
...
스텝을 강조하는 컨텐츠를 만들고자 할 경우, 스텝 섹션 컴포넌트를 활용할 수 있다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
06-1. Card Type
스텝 섹션 컴포넌트를 추가한 화면은 다음과 같다. Card
, Timeline
2 가지 타입이 존재하며, Default는 카드형이다.
...
다가오는 이벤트를 표현하고자 할 경우, 사용 가능한 업커밍 이벤트 섹션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
컴포넌트를 빌더에 처음 추가하면 다음과 같다.
...
SNS를 연결해야할 경우 SNS 섹션 컴포넌트를 사용할 수 있다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
컴포넌트를 추가한 초기화면은 다음과 같다.
...
Images
테이블에서 추가() 아이콘을 클릭하여 다음과 같이 내용을 입력하자.
...
컨텐츠 인터렉티브가 필요한 화면에서 컨텐츠 섹션 컴포넌트를 사용 할 수 있다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
09-1. Map Right
컴포넌트 추가 시 초기 화면은 다음과 같다. 타입은 Map Right
, Map Left
, Address Left
3가지가 있으며, 초기 Default는 지도가 오른쪽에 있는 타입이다.
...
액션 호출이 필요할 경우, 콜투액션 섹션 컴포넌트를 사용할 수 있다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
컴포넌트를 화면에 추가한 초기 화면은 다음과 같다.
...
구독 신청이 필요한 영역에서 주로 사용하는 색션 컴포넌트이다.
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
구독 컴포넌트는 Simple Image
(Default)와 Social Network
2가지 타입이 있다. 아래 그림과 같이 구독 신청 영역과 Image
/ SNS
영역 크게 2가지로 영역을 구분 할 수 있다.
...
Text | Image | Icon Only |
---|---|---|
Status | ||||
---|---|---|---|---|
|
지구본 모양이 있는 경우, 해당 컴포넌트 Label에 멀티 랭귀지 설정을 진행 할 수 있다. 지구본(🌎) 아이콘을 클릭하면, 다음과 같이 언어 설정 Modal이 출력된다. 한국어
, 영어
, 일본어
, 중국어
4가지 언어를 지원하며, 다국어 기능을 적용할 각각의 필드에 해당 언어로 버튼명을 입력하고 저장하면 화면에 적용된다.
...
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Subscription
...
12. Card Section
기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/CardSection
...
Swiper, Columns, Random 유형의 배너 섹션 사용 가능 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/BannerSection
...
상품리뷰, 갤러리, 블로그, Q&A, FAQ, 일반 게시판 Config 사용 가능 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 :
Status | ||||
---|---|---|---|---|
|
...
15. Survey Form
Status | ||||
---|---|---|---|---|
|
설문조사 Config 사용 가능 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 :
Status | ||||
---|---|---|---|---|
|
...
대시보드에서 볼 수 있는 Board 요약 리스트 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
Status | ||||
---|---|---|---|---|
|
...