| Table of Contents |
|---|
텍스트 필드는 인풋은 가장 기본적인 사용자 입력 컨트롤이다. 사용자의 이름, 이메일주소, 전화번호, 비밀번호와 같은 일반적인 정보부터 상품 금액, 계좌번호, 가격 정보 등 상세한 정보 수집이 필요한 상황에서 범주화 할 수 없는 정보 입력을 요청해야 할 경우 주로 사용된다.
UI 유형
텍스트 필드 유형은 4가지로 구분한다인풋의 유형은 3가지로 구분할 수 있다.
No | Basic Text FieldType | Description | |||
|---|---|---|---|---|---|
1 | Default Text FieldInput |   일반적인 텍스트 필드인풋 | |||
2 | Text Field with Tooltip |  툴팁을 함께 사용하는 텍스트 필드 | 3 | Text Field with Input with Addon |   입력 받아야하는 문구 중 고정 내용을 애드온으로 Addon으로 표시 |
43 | Text Field Input with fix |   입력 필드 내에 고정 문구를 prefix, suffix로 표시 |
| Status | ||||
|---|---|---|---|---|
|
Form이나 Table 내에 있는 텍스트 필드는 라벨이 입력 필드 상단으로 고정된다.
...
| Status | ||||
|---|---|---|---|---|
|
텍스트 필드의 필수 입력 여부 설정은 Platform Console에 있는 스키마 메뉴에서 진행 한다. 필수 입력으로 설정된 텍스트 필드는 사용자 입력 시 설정 조건에 따라 경고성 Helper Text가 자동 출력 된다.
...
| Status | ||||
|---|---|---|---|---|
|
...
| Status | ||||
|---|---|---|---|---|
|
...
상태 정보
텍스트 필드의 상태는 아래와 같이 4가지로 표현되며, 모든 텍스트 필드 컴포넌트에 공통으로 적용되어 있다.
...
Normal
...
Hover
...
Active
...
Disabled
...
| Status | ||||
|---|---|---|---|---|
|
...
Typing
...
Filled
...
Success
...
Error
...
...
셋팅 옵션
BackOffice Builder의 Text Field > Setting > [Option] 설정을 통해 입력 텍스트 필드 내용을 변경한다.
1. Size
텍스트 필드의 크기는 아래와 같이 3가지로 선택 할 수 있다.
...
Setting
...
Result
...
( 참고: https://ionsdp.atlassian.net/browse/ICE4-2002
Label(버튼이름)에 입력된 텍스트 길이에 따라 입력 필드의 가로 길이는 가변적으로 변한다. 만약 고정 사이즈의 입력 필드가 필요하다면, Fixed Field Size를 조절하여 직접 사이즈를 지정 할 수도 있다.
...
2. Default Value
텍스트 필드 내에 디폴트 값을 지정하는 기능이다. 사용자는 디폴트 값을 확인하고 그대로 사용하거나, 삭제 및 수정 할 수 있다. 플레이스 홀더 문구보다 상위에 출력된다.
...
Setting
...
Result
...
3. Field Size
입력 필드의 사이즈를 비율로 조절할 수 있다.
...
Setting
...
Result
...
https://ionsdp.atlassian.net/browse/ICE4-2003
4. Placeholder
플레이스 홀더는 입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라진다.
...
Setting
...
Result
...
5. Helper text (=Comment)
입력 필드 하단에 고정되어 노출되는 도움말 문구이다. 사용자의 입력 성공/실패 여부와 상관 없이 도움말 문구는 고정으로 출력된다.
...
Setting
...
Result
...
6. Tooltip
툴팁을 사용하면, 라벨 옆에 물음표 아이콘이 추가되고, 마우스 오버 시 입력한 안내 문구가 출력된다.
...
Setting
...
Result
...
7. Disable
작업을 사용 할 수 없도록 버튼을 비활성화 시켜야 한다면 Disable 옵션을 ON으로 설정한다.
...
Setting
...
Result
...
8. Addon Before/After
Text Options 영역에서 애드온 기능을 사용할 wiki/spaces/ICE4P/pages/1543733287/Input+Component#Common-options )
Basic UI
텍스트 인풋의 기본 UI는 다음과 같다. Hidden Label 옵션으로 라벨 없이 사용이 가능하며, Disable 옵션을 설정하여 비활성화 상태로 사용 할 수도 있다. Form이나 Table 내에 사용되는 경우, 라벨 위치는 입력 필드 상단을 기본으로 한다.
...
...
Function
1. Addon Before/After
텍스트 컴포넌트는 애드온 기능을 사용 할 수 있다. 주로 입력 받을 값에 고정으로 들어가는 텍스트를 미리 입력필드 입력 필드 밖에 고정하는 용도로 사용된다.
...
Setting
...
Result
...
2. Prefix/Suffix
Text Options 영역에서 Fix 기능을 사용할 수 있다. 텍스트를 입력필드 안에 고정하여 입력 필드에 Prefix/Suffix 기능을 사용 할 수 있다. 설정한 고정 문구 또는 아이콘을 다음과 같이 출력한다.
...
Setting
...
Result
...
3. Text Limit
Text Options 영역에서 입력 받을 텍스트 길이에 제한 조건을 설정 할 수 있다. 체크 타입을 Bytes 또는 Words 으로 선택하고 Limit 값을 직접 입력하여 설정한다. Show Counter 옵션으로 입력값의 실시간 카운트도 사용 할 수 있다.
...
Setting
...
Result
...
| Status | ||||
|---|---|---|---|---|
|
...
#Text Limit 옵션 상세
Check Type : 텍스트 길이 체크 타입 선택{
Bytes,Words}Show Counter : 입력값 실시간 카운트 사용 여부 설정
Limit : 입력 텍스트 최대 Max 제한 길이를 숫자로 입력하여 설정
Min Limit : 입력 텍스트 최소 Min 제한 길이를 숫자로 입력하여 설정
Limit Message : Limit 조건 충족시 출력 할 안내 문구를 텍스트로 입력