Table of Contents |
---|
...
UI 유형
텍스트 인풋의 유형은 4가지로 구분한다.
No | Basic Text InputType | Description |
---|---|---|
1 | Default Text Input | 일반적인 텍스트 인풋 |
2 | Text Input with Tooltip | 툴팁을 함께 사용하는 텍스트 인풋 |
3 | Text Input with Addon | 입력 받아야하는 문구 중 고정 내용을 애드온으로 표시 |
4 | Text Input with fix | 입력 필드 내에 고정 문구를 prefix, suffix로 표시 |
...
Normal | Hover |
---|---|
Active | Disabled |
...
셋팅 옵션
BackOffice Builder의 Input Component > Text
Input > Setting
> [Option] 설정을 통해 입력 텍스트 인풋의 구성을 변경한다에서 상세 설정을 진행한다.
Info |
---|
Common Options : 입력형 컴포넌트에 공통으로 적용되는 옵션 |
...
텍스트 인풋의 크기는 아래와 같이 3가지로 선택 할 수 있다.
Setting | Result |
❤︎ 텍스트 인풋의 사이즈 조절은 Form 내에서만 확인 가능
Label(버튼이름)에 입력된 텍스트 길이에 따라 입력 필드의 가로 길이는 가변적으로 변한다. 만약 고정 사이즈의 입력 필드가 필요하다면, Fixed Field Size를 조절하여 직접 사이즈를 지정 할 수도 있다.
...
입력 필드의 사이즈를 비율로 조절할 수 있다.
Setting | |
Result |
❤︎ 텍스트 인풋의 필드 사이즈 조절은 Form 내에서만 확인 가능
3. Placeholder
플레이스 홀더는 입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라진다.
...
Status | ||||
---|---|---|---|---|
|
설정시 문구 미출력, Text Limit 글자수 조건에 맞지 않으면 입력 불가
...
Status | ||||
---|---|---|---|---|
|
...
Status | ||||
---|---|---|---|---|
|
Filled | |
---|---|
Success | Error |