Element Components [19]

컴포넌트 목록은 상황에 따라 추가, 삭제 및 디자인이 변경될 수 있습니다.

01. Horizontal Line

수평선을 그리는 컴포넌트이다. 컴포넌트 추가 시 가로 선이 추가되며, 다음과 같이 옵션 설정이 가능하다.

• Border : Color, Size, Type{Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset}

• Shadow : Color, X / Y / Blur 수치 입력

• Angle : 각도 입력

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/HorizontalLine

Border	Shadow	Angle

Border	Shadow	Angle
Open	Open

02. Vertical Line

수직선을 그리는 컴포넌트이다. 컴포넌트 추가 시 세로 선이 추가되며, 다음과 같이 옵션 설정이 가능하다.

• Border : Color, Size, Type{Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset}

• Shadow : Color, X / Y / Blur 수치 입력

• Angle : 각도 입력

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/VerticalLine

03. Text

텍스트를 입력하는 컴포넌트이다. 컴포넌트 추가 후 다음과 같이 옵션을 설정하여 텍스트를 추가 할 수 있다. Preset 설정을 이용하거나, 셋팅 타입{Customized}를 선택하여 원하는 텍스트 스타일을 구체적으로 설정 할 수 있다.

• Text : 텍스트 입력 영역, 다국어 설정 기능 지원( 아이콘)

• Background Color : 텍스트 영역의 배경 색상 설정

• Type : {Paragraph, Span, Div} 선택 가능

• Setting : {Preset, Customized} 선택 가능

  • Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 정렬, 효과옵션(볼드, 기울기, 라인, 취소)

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Text

tip 다국어 입력

지구본 아이콘을 클릭 하면, 다음과 같이 한국어/영어/일본어/중국어를 입력 할 수 있는 다국어 설정 모달이 출력된다. 원하는 언어 영역에 해당 언어를 입력하고 [OK] 버튼을 클릭하면, 해당 컴포넌트에 다국어 설정 내용을 저장하고 FO에 출력한다.

텍스트 디자인 설정

Setting{Customized} 선택시 출력되는 하위 옵션 목록

• Font Family : 폰트 종류 선택

• Size(px) : 폰트 사이즈 설정

• Line Spacing : 줄 간격 설정

• Character : 글자 간격 설정

• Color : 폰트 색상 설정

• Align : 글자 정렬 설정 {Left, Center, Right, Basic}

• Option : 폰트 옵션{볼드, 기울기, 밑줄, 취소선}

04. Heading

헤딩 텍스트를 입력하는 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다. Anchor 기능을 이용하여 헤더 텍스트 클릭 시 설정한 위치로 커서를 이동시킬 수 있다.

• Anchor : 동일 페이지내에 원하는 위치로 커서 이동

• Type : 헤더 타입 설정(크기)

• Text : 텍스트 입력 영역, 다국어 설정 기능 지원( 아이콘)

• Background Color : 배경 색상 설정

• Background : {Auto, Fixed} 선택 가능, Fixed로 설정 시 지정한 배경 색상 적용

• Setting : {Preset, Customized} 선택 가능 ( 참고 Element Components [19] | 텍스트 디자인 설정 )

  • Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 정렬, 효과옵션(볼드, 기울기, 라인, 취소)

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Heading

tip Anchor Function Set

• 먼저 제목을 선택하고 앵커 이름을 작성/선택합니다.

• 두 번째, 단추, 연결, 메뉴 등을 사용하고 동일한 앵커 이름을 선택합니다.

• 동일한 앵커로 버튼, 링크, 메뉴 등을 클릭하면 페이지가 스크롤됩니다.

05. Rectangle

사각형을 입력하는 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가되며, 다음과 같이 옵션 설정이 가능하다.

• Background : 도형 색상 설정

• Border : Color, Size, Type{Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset}

• Shadow : Color, X / Y / Blur 수치 입력

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Rectangle

06. Image

이미지를 입력하는 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Image : 이미지 업로드(PC/Mobile)

• Alt : 대체 텍스트 메모 기능(For Image Broken, SEO(Search Engine Optimization), 시각장애우 판독 모드용)

• Opacity : 투명도 설정 가능

• Style : Border, Radius, Shadow, Grow 등 스타일 설정 영역

  • Border : Color, Size, Type{Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset}

  • Radius : 설정한 보더에 라운딩 정도 설정 가능

  • Shadow : Color, X / Y / Blur 수치 입력

  • Grow : 이미지 풀사이즈 활성화 ON/OFF

• Action : 이미지 클릭 시 발생하는 엑션 설정 영역

  • Link : {URL, Page, Anchor, Document, Email, Phone Number, Modal, None} 링크 타입 설정

  • Open : {New window, Current window, Parent Window, Redirect Window} 링크 오픈 타입 설정

  • Link Value : 링크 타입 선택에 따라, 링크 경로 입력 설정 가능

• Layout : 이미지 레이아웃 설정 영역

  • Alignment : {Left, Center, Right} 정렬 설정, 이미지가 Grow{OFF}일 경우 사용 가능

  • Display Method : {Fluid Block, Brick, Text} 전시 메소드 설정

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Image

❖ 옵션 상세 예시

07. Icon

아이콘 입력 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Type Icon : {Icon, Svg Icon} 선택 가능

  • Icon : 아이콘 데이터 목록에서 선택

  • Svg : svg 확장자 아이콘 직접 업로드

• Size(px) : 아이콘 사이즈 설정

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Icon

08. Card

카드 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Type : 9개 카드 타입 선택 가능

• Hide Image : 이미지 숨김 ON/OFF 설정

• Media Type : {Image, Video} 선택 가능

• Image : 이미지 컴포넌트 설정과 동일 옵션 Element Components [19] | 06. Image

• Secondary Images : 이미지 추가 설정 가능

• Buttons : 카드에 사용되는 버튼 설정 가능

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Card

❖ 옵션 상세 예시

09. Table

테이블 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Columns : 테이블 필드 항목 추가

• Table Data : 테이블 데이터 출력 영역

• Show Index : 테이블 첫번째 열에 No 추가 여부 ON/OFF 설정 가능

• Show Border : Border 사용 ON/OFF 설정 가능

• Data map : Preset, API URL, From NodeType, To NodeType, List 로 구성

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Table

❖ Columns Setting

❖ List Setting

tip Data Field Set

데이터 필드는 데이터 맵 테이블에서 API 키로 매핑할 열 값의 키로 정의됩니다. 샘플은 다음과 같습니다.

1 > 테이블 CSS를 지원하는 프로젝트의 Layout을 사용합니다. 기본값으로 설정하시길 제안합니다.

2> 먼저 데이터 필드를 사용하여 열 name을 정의합니다. 데이터 필드도 name입니다. (참조: Type 필드의 값은 로 매핑할 API 속성의 값과 일치해야 함).

3 > 그리고 데이터맵 내부에서는 URL API 필드에 카테고리 API /svc/best product/category?categoryId=1225685663&pageSize=4를 사용했습니다. 그런 다음 매핑 데이터를 name(API 의 속성 키)에서 name(내 테이블의 값 키 )으로 설정합니다.

4 > 결과를 다음과 같이 확인할 수 있습니다.

10. Timeline

타임라인 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Type : {Timeline Type Tree, Timeline Type List} 선택 가능

• Timeline Data : 데이터 추가/설정 영역

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Timeline

❖ Timeline Data Setting

11. Video

비디오를 삽입하는 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Option : {Upload, Url} 선택 가능

  • Upload : 영상 파일 직접 업로드 등록

    • Video Thumbnail : 영상 썸네일 직접 등록 가능

  • URL : 영상 URL 입력으로 등록

• Display Controls : 컨트롤러 사용 ON/OFF 설정

• Auto Play : 자동 플레이 기능 ON/OFF 설정

• Loop : 무한반복 플레이 기능 ON/OFF 설정

• Muted : 음소거 기능 ON/OFF 가능

[Design]

• Border : Color, Size, Type{Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset}

• Shadow : Color, X / Y / Blur 수치 입력

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Video

12. Audio Player

오디오 플레이어 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

[Audio Properties]

• Option : {Upload, Url} 선택 가능

  • Upload : 오디오 파일 직접 업로드 등록

  • URL : 오디오 URL 입력으로 등록

• Cover Image : 오디오 커버 이미지 직접 등록 가능

• Track Name : 트랙명 입력

• Artist Name : 아티스트명 입력

• Display Controls : 컨트롤러 사용 ON/OFF 설정

• Auto Play : 자동 플레이 기능 ON/OFF 설정

• Loop : 무한반복 플레이 기능 ON/OFF 설정

• Preload Audio : 프리로드 기능 ON/OFF 가능

[Display]

• Display : {Cover Image, Track Name, Artist Name, Progress Bar, Time Stamp} 디스플레이 다중 선택 가능

[Design]

• Setting : {Preset, Customized} 선택 가능 ( 참고 Element Components [19] | 텍스트 디자인 설정 )

  • Customized : Background, Border, Radius, Position, Shadow, Icon, Text 옵션 설정 가능

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/AudioPlayer

13. Map

지도를 삽입하는 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Show Title : 타이틀 노출 여부 설정 가능

• Option : {Address, Location} 선택하여 주소 셋팅 가능

  • Address : 주소 직접 입력으로 데이터 등록

  • Location : 위도/경도 값 입력으로 주소 데이터 등록

[Design]

• Border : Color, Size, Type{Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset}

• Shadow : Color, X / Y / Blur 수치 입력

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Map

14. Countdown

카운트 다운 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Design Type : {Text Countdown, Circular Countdown} 선택 가능

• Data Type : {End date, D-day} 선택 가능

  • End date : 시작/종료일시를 직접 지정하여 카운트다운 진행

  • D-day : 시작일시를 설정하고, 원하는 D-day일자를 설정하여 카운트다운 진행

    • Continue After D-day : D-day 이후 카운트다운 진행 여부를 ON/OFF로 설정

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Countdown

15. Calendar

캘린더 삽입 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Start week on : {Sun(Default), Mon, Tue, Wed, Thur, Fri, Sat} 달력 시작 요일 선택 가능

• Schedules : 달력에 스케줄 데이터 입력/출력 가능

[Design]

• Border : Color, Size, Type{Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset}

• Shadow : Color, X / Y / Blur 수치 입력

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Calendar

❖ Schedule Data Setting

16. Indicator

인디케이터 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Type : {Horizontal Progress Bar, Circle Bar} 선택 가능

• Show Progress : 프로그래서바 노출 여부 ON/OFF 설정 가능

• Show Text : Type{Circle Bar}의 경우, 텍스트 디스플레이 여부 ON/OFF 설정 가능

• Design Setting : 디자인 관련 셋팅 ON/OFF 설정 가능

  • Main Bar : 인디케이터 메인 Bar 칼라 직접 설정

  • Progress Bar : 인디케이터의 프로그래스 Bar 칼라 직접 설정

  • Progress(%) : 프로그래스 퍼센트 직접 입력

  • Shadow : Color, X / Y / Blur 수치 입력

• Text Setting : 텍스트 관련 셋팅 ON/OFF 설정 가능 ( 참고 Element Components [19] | 텍스트 디자인 설정 )

  • Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 텍스트 위치와 정렬 설정 가능

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Indicator

17. Link Area

특정 컴포넌트에 링크 기능을 추가하고자 하는 경우 사용하는 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Space Type : {Rectangle, Oval}로 링크가 잡힐 영역의 공간 타입 선택 가능

• Link Type : {URL(Default), Page, None} 선택 가능

• Link Target : {New window, Current window, Parent window, Redirect window} 링크 오픈 타겟 타입 선택

• Link Value : 링크값 직접입력(URL) 또는 이미 만들어 놓은 FO 페이지 목록 중 선택(Page)

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/LinkArea

18. HTML

HRML 컴포넌트이다. 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• HTML : 입력필드에 원하는 코드 입력

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Html

19. Button

버튼 컴포넌트 추가 후 다음과 같은 옵션을 추가 할 수 있다.

• Type : {Text, Image, Icon Only} 버튼 타입 선택 가능

• Label : 버튼에 출력 할 레이블 입력

• Icon : 버튼에 추가할 아이콘 이미지 선택 가능

• Disabled : 비활성화 ON/OFF 설정 가능

• Action Type : {Default, Call API, Refresh Data, Close Modal} 버튼 클릭 시 발생 할 액션 타입 선택

  • Action Type {Default} 선택 시 하위 옵션

    • Link : {URL, Page, Anchor, Document, Email, Phone Number, Modal, None} 링크 타입 설정

    • Open : {New window, Current window, Parent Window, Redirect Window} 링크 오픈 타입 설정

    • Link Value : 링크 타입 선택에 따라, 링크 경로 입력 설정 가능

  • Action Type {Call API} 선택 시, Custom Api 사용 또는 Api 카테고리에서 선택 가능

  • Action Type {Refresh Data} 선택 시, 해당 버튼을 클릭하면 데이터 새로고침 실행

  • Action Type {Close Modal} 선택 시, 해당 버튼을 클릭하면 Modal 닫힘 실행

• Related Store : 컴포넌트 요소 간의 데이터를 연결하는데 사용하는 옵션

• Use Callback : 콜백 사용여부 ON/OFF 설정 가능

[Design]

• Setting : {Preset, Customized} 선택 가능 ( 참고 Element Components [19] | 텍스트 디자인 설정 )

  • Customized : Background, Border, Radius, Shadow, Icon, Text 옵션 설정 가능

    • Shape : {Empty, Flat, Round} 타입 설정

    • Use Background : 사용 여부 ON/OFF 설정 가능

      • Background : 사용 시 배경 색상 설정

    • Border : 버튼 테두리 사용 여부 ON/OFF 설정 가능

      • Color / Size / Type 설정

    • Radius : 버튼 테두리 반경 설정

    • Shadow : 사용 여부 ON/OFF 설정 가능

      • Color / 두께(X,Y) / Blur 값 설정

    • Text Size : 폰트 사이즈 설정

    • Ling Spacing : 줄 간격 설정

    • Character : 글자 간격 설정

    • Icon Size , Unit 설정

    • Button Text Style 설정

      • Font, Font Style, Color, Hover 설정

    • Button Icon Style 설정

      • Position : 버튼 위치 {Left, Right}

      • Color, Hover 설정

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Button