| Table of Contents |
|---|
...
No | Basic Text Field | Description |
|---|---|---|
1 | Default Text Field |  일반적인 텍스트 필드 |
2 | Text Field with Tooltip |  툴팁을 함께 사용하는 텍스트 필드 |
3 | Text Field with Addon |  입력 받아야하는 문구 중 고정 내용을 애드온으로 표시 |
4 | Text Field with innerfixfix |  입력 필드 내에 고정 문구를 prefix, suffix로 표시 |
...
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
...
텍스트 필드 내에 디폴트 값을 지정하는 기능이다. 사용자는 디폴트 값을 확인하고 그대로 사용하거나, 삭제 및 수정 할 수 있다. 플레이스 홀더 문구보다 상위에 출력된다.
Setting | Result |
 |  |
...
3. Field Size
입력 필드의 사이즈를 비율로 조절할 수 있다.
Setting |  |
Result |
...
4. Placeholder
플레이스 홀더는 입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라진다.
Setting | Result |
 |  |
4. Tooltip
툴팁을 사용하면, 라벨 옆에 물음표 아이콘이 추가되고, 마우스 오버 시 입력한 안내 문구가 출력된다.
...
Setting
...
Result
...
...
5. Helper text (=Comment)
입력 필드 하단에 고정되어 노출되는 도움말 문구이다. 사용자의 입력 성공/실패 여부와 상관 없이
Setting | Result |
 |  |
...
6
...
. Tooltip
툴팁을 사용하면, 라벨 옆에 물음표 아이콘이 추가되고, 마우스 오버 시 입력한 안내 문구가 출력된다.
Setting | Result |
 | Result |
...
7.
...
제공하는 Text 옵션은 총 3가지 타입이다.
Addon Before/After: 페이지 우측 상단에 표시되는 경고성 메시지로 닫기 버튼과 아이콘이 표시됨Prefix/Suffix: 사용자에게 확인을 요청하는 간단한 대화 상자형 메시지Text Limit: 사용자가
Addon Before/After
...
Setting
...
Result
...
7. Prefix/Suffix
...
Setting
...
Result
...
Setting
...
Result
...
Disable
작업을 사용 할 수 없도록 버튼을 비활성화 시켜야 한다면 Disable 옵션을 ON으로 설정한다.
Setting | Result |
 |  |
...
8. Addon Before/After
Text Options 영역에서 애드온 기능을 사용할 수 있다. 주로 입력 받을 값에 고정으로 들어가는 텍스트를 미리 입력필드 밖에 고정하는 용도로 사용된다.
Setting | Result |
  |  |
...
9. Prefix/Suffix
Text Options 영역에서 Fix 기능을 사용할 수 있다. 텍스트를 입력필드 안에 고정하여 출력한다.
Setting | Result |
  |  |
...
10. Text Limit
Text Options 영역에서 입력 받을 텍스트 길이에 제한 조건을 설정 할 수 있다.
Setting |  |
Result |  |
| Status | ||||
|---|---|---|---|---|
|
...