Form Components [8]

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

1 Basic Setting
2 Design Setting
3 01. Text Input
4 02. Password Input
5 03. Textarea
6 04. Number Input
7 05. Checkbox
8 06. Radio
9 07. Range Controller
10 08. Rating

Basic Setting

❖ 모든 Form 컴포넌트는 Field pid and Store id 를 갖는다.

How to Set : Field Pid, Store id

Field Pid: name of storage field
Store id: name of storage to store data of input field

ex 로그인 페이지(아이디, 패스워드 입력 필요)

Login 폼에는 2개의 필드(username, password)가 존재한다. 아래와 같이 셋팅하자.

Store id = Login
field pid = username, password (input 2 texts)

사용자가 로그인 폼에서 2개 필드에 값을 입력하고 버튼을 클릭하면, StoreLogin에 format{username=”test user”, password=”****”}으로 값을 저장하고 API에 보낸다.

ex 로그인 페이지(아이디, 패스워드 입력 필요)

Login 폼에는 2개의 필드(username, password)가 존재한다. 아래와 같이 셋팅하자.

Store id = Login
field pid = username, password (input 2 texts)

사용자가 로그인 폼에서 2개 필드에 값을 입력하고 버튼을 클릭하면, StoreLogin에 format{username=”test user”, password=”****”}으로 값을 저장하고 API에 보낸다.

❖ 입력을 목적으로 하는 Form 컴포넌트는 Required, Disabled, Read Only, Hide Label 옵션을 갖는다.

No	Component Name	Required	Disabled	Read Only	Hide Label

No	Component Name	Required	Disabled	Read Only	Hide Label
1	Text Input	O	O	O	O
2	Password Input	O	O	O	O
3	Textarea	O	O	O	O
4	Number Input	O	O	O	O
5	Checkbox	O	O	O	O
6	Radio	O	O	O	O
7	Range Controller	O	O	X	O
8	Rating	O	O	O	O

cf. Range Controller 컴포넌트만 Read Only 기능을 지원하지 않는다.

Required : 필수 표시
Disabled : 비활성화 적용
Read Only : 쓰기 불가, 읽기 전용으로 설정
Hide Label : 레이블 숨김 설정

Design Setting

❖ Form 컴포넌트 각각의 디자인 옵션 요약

디자인은 컴포넌트와 함께 출력되는 Label과 사용자가 입력하는 Input 2가지 디자인 타입으로 나뉜다.

No	Component Name	Label Design	Input Design

No	Component Name	Label Design	Input Design
1	Text Input	O	O
2	Password Input	O	O
3	Textarea	O	O
4	Number Input	O	O
5	Checkbox	O	X
6	Radio	O	X
7	Range Controller	O	X
8	Rating	O	X

01. Text Input

텍스트 삽입 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

Field Pid, Store id / Required, Disabled, Read Only, Hide Label : Form Components [8] | Basic Setting

Label : 레이블 텍스트 입력
Default Value : 디폴트로 출력할 텍스트 값 설정 가능
Placeholder : 플레이스 홀더 문구 입력 가능(가이드 문구)
Use Limit : 텍스트 입력 글자수 제한 설정
Prefix Icon/Prefix : 컴포넌트 앞에 붙일 Prefix 아이콘과 텍스트 설정 가능
Suffix Icon/Suffix : 컴포넌트 뒤에 붙일 Prefix 아이콘과 텍스트 설정 가능
Input Text : {Preset, Customized} 선택 가능
- Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 정렬, 효과옵션(볼드, 기울기, 라인, 취소)

[Design]

Label : {Preset, Customized} 선택 가능
- Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 정렬, 효과옵션(볼드, 기울기, 라인, 취소)
Input Text : {Preset, Customized} 입력받을 텍스트의 디자인 설정 가능
- Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 정렬, 효과옵션(볼드, 기울기, 라인, 취소)

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

Default	Setting	Design

Default	Setting	Design

02. Password Input

비밀번호 입력 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

Field Pid, Store id / Required, Disabled, Read Only, Hide Label : Form Components [8] | Basic Setting

Label : 레이블 텍스트 입력
Placeholder : 플레이스 홀더 문구 입력 가능(가이드 문구)
Left Icon :컴포넌트 좌측 아이콘 추가 가능
Password Mask : 패스워드 숨기기 상태일때, 입력값 대신 출력할 문자 선택 가능 new

[Design]

Label : {Preset, Customized} 선택 가능
- Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 정렬, 효과옵션(볼드, 기울기, 라인, 취소)

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

Default	Setting	Design

Default	Setting	Design

03. Textarea

컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

Field Pid, Store id / Required, Disabled, Read Only, Hide Label : Form Components [8] | Basic Setting

Label : 레이블 텍스트 입력
Placeholder : 플레이스 홀더 문구 입력 가능(가이드 문구)
Use Limit : Textarea에 입력 할 수 있는 문구 길이 제한(글자수 숫자로 입력)
Auto Size : 입력 문구의 Rows Min/Max를 설정하여, Textarea 세로 길이 자동 조절

[Design]

Label : {Preset, Customized} 선택 가능
- Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 정렬, 효과옵션(볼드, 기울기, 라인, 취소)

▶︎ 웹가이드 바로가기 :

Default	Setting	Design

Default	Setting	Design

tip Limit / Auto Size

글자 수 제한을 설정하면, 아래 그림과 같이 컴포넌트 우측 하단에 입력 제한 글자 수가 표기된다. Auto Size를 ON으로 설정하고, Min Rows = 2 / Max Rows = 5 로 입력하여 저장해보자. 그러면, 다음과 같이 입력 되는 글자수 Rows 수에 따라 입력 필드가 자동으로 늘어나며, 설정한 Min/Max Rows 높이는 유지된다.

Min Rows = 2	Max Rows = 5

Min Rows = 2	Max Rows = 5

04. Number Input

숫자 입력 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

Field Pid, Store id / Required, Disabled, Read Only, Hide Label : Form Components [8] | Basic Setting

Label : 레이블 텍스트 입력
Default Value : 컴포넌트에 출력될 기본값 설정 가능
Placeholder : 플레이스 홀더 문구 입력 가능(가이드 문구)
Use Controls : 숫자 입력 뿐 아니라 [-],[+] 아이콘 클릭으로 숫자 감소/증가 가능
- Step : [-],[+] 아이콘 클릭 시 감소/증가 시킬 숫자 간격 설정 가능
Min/Max : 입력 가능 숫자의 최소/최대값 설정 가능
Decimals : 소수점 삭감 자리수 설정 가능 (❖미설정시 소수점 입력 불가)
Prefix Icon/Prefix : 컴포넌트 앞에 붙일 Prefix 아이콘과 텍스트 설정 가능
Suffix Icon/Suffix : 컴포넌트 뒤에 붙일 Prefix 아이콘과 텍스트 설정 가능

[Design]

Label : {Preset, Customized} 선택 가능
- Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 정렬, 효과옵션(볼드, 기울기, 라인, 취소)
Input Text : {Preset, Customized} 입력받을 텍스트의 디자인 설정 가능
- Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 정렬, 효과옵션(볼드, 기울기, 라인, 취소)

▶︎ 웹가이드 바로가기 :

Default	Setting	Design

Default	Setting	Design

tip Use Controls / Step

숫자 입력 컴포넌트에 좌우 [-]/[+] 컨트롤러를 추가하여, 사용자의 입력을 도울 수 있다. 하위 옵션으로 Step 을 설정 할 수 있으며, 이는 컨트롤러 아이콘 클릭 시 넘어가는 숫자의 단위이다. (ex. Step = 2 로 설정후 컨트롤러 클릭)

Step = 2, Default	Step = 2, Click [+]

Step = 2, Default	Step = 2, Click [+]

tip Min/Max

입력 가능한 숫자의 Min/Max 값을 설정하고, 해당 조건을 만족하지 않는 숫자가 입력될 경우 안내 문구를 출력한다.

Min = 1, Input “0”	Max = 100, Input “101”

Min = 1, Input “0”	Max = 100, Input “101”

tip Decimals

소수점 이하 자리수를 지정 할 수 있다. 입력한 숫자만큼만 소수점 이하 숫자를 입력 할 수 있다. 미 설정 시 소수점 입력 불가

Decimals = , Input “1000.12345”	Decimals = 3, Input “1000.12345”

Decimals = , Input “1000.12345”	Decimals = 3, Input “1000.12345”
❖ Decimals 미설정 : 소수점 입력 불가	❖ Decimals 설정 : 지정한 자리수만큼만 남기고 나머지 소수점 이하 숫자는 버림

05. Checkbox

체크박스 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

Field Pid, Store id / Required, Disabled, Read Only, Hide Label : Form Components [8] | Basic Setting

Label : 레이블 텍스트 입력
Default Value : 컴포넌트에 출력될 기본값 설정 가능
Use Limit : 사용자가 선택 가능한 체크박스 개수 Max 설정 가능
List Data Type : 3가지 타입의 옵션 Load 방법 제공
- node schema : 노드 유형 및 노드 내부의 필드를 선택하여 Load (developer using)
- api : API를 설정하여 (developer using)
- custom : format 옵션을 자유롭게 커스터마이징

▶︎ 웹가이드 바로가기 :

Default	Setting	Design

Default	Setting	Design

tip List Data Type{Node Schema}

아래 동영상을 참고하여 옵션을 셋팅해보자.

tip List Data Type{Custom}

아래 예제를 참고하여 옵션을 셋팅해보자.

[
  { "label": "Strawberry", "value": "Strawberry" },
  { "label": "Banana", "value": "Banana" },
  { "label": "Apple", "value": "Apple" },
  { "label": "Kiwi", "value": "Kiwi" }
]

tip Use Limit{ON}, Limit = “2“

체크박스 최대 선택 개수를 제한 할 수 있다. Limit의 값을 2로 설정한 다면, 사용자가 체크박스를 2개 선택했을 경우, 다음과 같이 선택하지 않은 나머지 옵션의 체크박스가 비활성화 된다.

06. Radio

라디오 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

Field Pid, Store id / Required, Disabled, Read Only, Hide Label : Form Components [8] | Basic Setting

Label : 레이블 텍스트 입력
Default Value : 컴포넌트에 출력될 기본값 설정 가능
List Data Type : 3가지 타입의 옵션 Load 방법 제공
- node schema : 노드 유형 및 노드 내부의 필드를 선택하여 Load (developer using)
- api : API를 설정하여 (developer using)
- custom : format 옵션을 자유롭게 커스터마이징

▶︎ 웹가이드 바로가기 :

Default	Setting	Design

Default	Setting	Design

tip List Data Type{Node Schema}

아래 동영상을 참고하여 옵션을 셋팅해보자.

tip List Data Type{Custom}

아래 예제를 참고하여 옵션을 셋팅해보자.

[
  { "label": "블랙", "value": "Black" },
  { "label": "화이트", "value": "White" },
  { "label": "레드", "value": "Red" },
  { "label": "블루", "value": "Blue" }
]

07. Range Controller

범위 컨트롤러 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

Field Pid, Store id / Required, Disabled, Read Only, Hide Label : Form Components [8] | Basic Setting

Label : 레이블 텍스트 입력
Use Controls : 숫자 입력 뿐 아니라 [-],[+] 아이콘 클릭으로 숫자 감소/증가 가능
- Step : [-],[+] 아이콘 클릭 시 감소/증가 시킬 숫자 간격 설정 가능
Min/Max : 입력 가능 숫자의 최소/최대값 설정 가능
Decimals : 소수점 삭감 자리수 설정 가능 (❖미설정시 소수점 입력 불가)
Prefix Icon/Prefix : 컴포넌트 앞에 붙일 Prefix 아이콘과 텍스트 설정 가능
Suffix Icon/Suffix : 컴포넌트 뒤에 붙일 Prefix 아이콘과 텍스트 설정 가능

[Design]

Label : {Preset, Customized} 선택 가능
- Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 정렬, 효과옵션(볼드, 기울기, 라인, 취소)

▶︎ 웹가이드 바로가기 :

Default	Setting	Design

Default	Setting	Design

tip Use Controls / Step, Min/Max, Decimals

Number Input 컴포넌트와 동일 기능, 해당 컴포넌트 참고(Form Components [8] | 04. Number Input)

08. Rating

별점(평점) 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

Field Pid, Store id / Required, Disabled, Read Only, Hide Label : Form Components [8] | Basic Setting

Label : 레이블 텍스트 입력
Default Value : 컴포넌트에 출력될 기본값 설정 가능

[Design]

Label : {Preset, Customized} 선택 가능
- Customized : 폰트, 텍스트 사이즈, 라인 공간, 문자 간격, 텍스트 칼라, 정렬, 효과옵션(볼드, 기울기, 라인, 취소)

▶︎ 웹가이드 바로가기 :

Default	Setting	Design

Default	Setting	Design