사용자가 문자와 숫자를 입력할 수 있는 가장 기본적인 입력 컨트롤이다. 사용자
| Table of Contents |
|---|
텍스트 인풋은 가장 기본적인 사용자 입력 컨트롤이다. 사용자의 이름, 이메일주소, 전화번호, 비밀번호와 같은 일반적인 정보부터 상품 금액, 계좌번호, 가격 정보 등 상세한 정보 수집이 필요한 상황에서 범주화 할 수 없는 정보 입력을 요청해야 할 경우 주로 사용된다.
ICE4에서는 2가지 유형의 텍스트 필드를 제공한다.
라벨 UP, 라벨 SIDE
UI 구조
텍스트 필드의 기본 구조는 다음과 같다.
...
1
...
필드 라벨
...
입력 필드에 입력 할 정보가 무엇인지 제목 표시
...
2
...
입력 필드
...
라벨 하단에 있는 텍스트 입력 영역으로, 입력 정보를 실시간으로 출력
...
3
...
플레이스 홀더 텍스트
...
입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라짐
...
4
...
입력 텍스트
...
사용자가 입력 필드에 작성한 텍스트
...
5
...
커서(Cursor)
...
사용자에 의해 입력된 텍스트의 필드 내의 현재 입력 위치 표시
...
6
...
클리어 버튼
...
필드에 입력한 정보를 한번에 삭제
...
7
...
도움말 텍스트
...
필드 하단에 노출되는 도움말 문구
...
8
...
툴팁
...
물음표 아이콘이 라벨 옆에 출력되며, 마우스 오버시 출력되는 안내 문구
※ 사용자 입력 시 출력되는 경고성 Helper Text는 스키마에서 설정하여 자동 출력됨 (7번과 별개임)
상태 정보
...
텍스트 인풋의 유형은 3가지로 구분할 수 있다.
No | Type | Description |
|---|---|---|
1 | Default Text Input |  일반적인 텍스트 인풋 |
2 | Text Input with Addon |  입력 받아야하는 문구 중 고정 내용을 Addon으로 표시 |
3 | Text Input with fix |  입력 필드 내에 고정 문구를 prefix, suffix로 표시 |
( 참고: 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 조건 충족시 출력 할 안내 문구를 텍스트로 입력