| 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 fixTextfix |   고정 입력 문구 또는 아이콘을 입력 필드 내에 고정 문구를 prefix, suffix로 표시 |
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
...
| Status | ||||
|---|---|---|---|---|
|
Form이나 Table 내에 있는 텍스트 필드는 라벨이 인풋필드 상단으로 고정된다.
...
| Status | ||||
|---|---|---|---|---|
|
텍스트 필드의 필수 입력 여부 설정은 Platform Console에 있는 스키마 메뉴에서 진행 한다. 필수 입력으로 설정된 텍스트 필드는 사용자 입력 시 설정 조건에 따라 경고성 Helper Text가 자동 출력 된다.
...
상태 정보
텍스트 필드의 상태는 아래와 같이 4가지로 표현되며, 모든 텍스트 필드 컴포넌트에 공통으로 적용되어 있다.
...
Normal
...
Hover
...
Active
...
Disabled
...
| Status | ||||
|---|---|---|---|---|
|
...
Typing
...
Filled
...
Success
...
Error
...
...
UI 구조
텍스트 필드의 기본 구조는 다음과 같다.
...
Label : 입력 필드에 입력 할 정보가 무엇인지 제목 표시
Input Field : 라벨 하단에 있는 텍스트 입력 영역으로, 입력 정보가 실시간으로 출력되는 영역
Tooltip : 물음표 아이콘이 라벨 옆에 출력되며, 마우스 오버 시 출력되는 안내 문구
Placeholder : 입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라짐
Helper Text : 필드 하단에 고정되어 노출되는 도움말 문구 (
Comment,Status colour Red title asis
Helper Text )Status colour Red title tobe Cursor : 사용자에 의해 입력된 텍스트의 필드 내의 현재 입력 위치 표시
Input Text : 사용자가 입력 필드에 작성한 텍스트
Clear Button : 필드에 입력한 정보를 한번에 삭제Status colour Yellow title new
셋팅 옵션
BackOffice Builder의 Text Field > Setting > [Option] 설정을 통해 입력 텍스트 필드 내용을 변경한다.
텍스트만
...
( 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1543733287/Input+Component#Common-options )
Basic UI
텍스트 인풋의 기본 UI는 다음과 같다. Hidden Label 옵션으로 라벨 없이 사용이 가능하며, Disable 옵션을 설정하여 비활성화 상태로 사용 할 수도 있다. Form이나 Table 내에 사용되는 경우, 라벨 위치는 입력 필드 상단을 기본으로 한다.
...
...
Function
1. Addon Before/After
텍스트 컴포넌트는 애드온 기능을 사용 할 수 있다. 주로 입력 받을 값에 고정으로 들어가는 텍스트를 미리 입력 필드 밖에 고정하는 용도로 사용된다.
...
2. Prefix/Suffix
입력 필드에 Prefix/Suffix 기능을 사용 할 수 있다. 설정한 고정 문구 또는 아이콘을 다음과 같이 출력한다.
...
3. Text Limit
입력 받을 텍스트 길이에 제한 조건을 설정 할 수 있다. 체크 타입을 Bytes 또는 Words 으로 선택하고 Limit 값을 직접 입력하여 설정한다. Show Counter 옵션으로 입력값의 실시간 카운트도 사용 할 수 있다.
...
#Text Limit 옵션 상세
Check Type : 텍스트 길이 체크 타입 선택{
Bytes,Words}Show Counter : 입력값 실시간 카운트 사용 여부 설정
Limit : 입력 텍스트 최대 Max 제한 길이를 숫자로 입력하여 설정
Min Limit : 입력 텍스트 최소 Min 제한 길이를 숫자로 입력하여 설정
Limit Message : Limit 조건 충족시 출력 할 안내 문구를 텍스트로 입력