Page Comparison

텍스트 필드는 인풋은 가장 기본적인 사용자 입력 컨트롤이다. 사용자의 이름, 이메일주소, 전화번호, 비밀번호와 같은 일반적인 정보부터 상품 금액, 계좌번호, 가격 정보 등 상세한 정보 수집이 필요한 상황에서 범주화 할 수 없는 정보 입력을 요청해야 할 경우 주로 사용된다.

...

UI 유형

텍스트 필드 인풋의 유형은 4가지로 구분한다.

No	Basic Text Field	Description
1	Default Text Field	일반적인 텍스트 필드인풋
2	Text Field with Tooltip	툴팁을 함께 사용하는 텍스트 필드인풋
3	Text Field with Addon	입력 받아야하는 문구 중 고정 내용을 애드온으로 표시
4	Text Field with fix	입력 필드 내에 고정 문구를 prefix, suffix로 표시

...

Form이나 Table 내에 있는 텍스트 필드는 라벨이 인풋은 입력 필드 상단으로 상단에 라벨이 고정된다.

...

텍스트 필드의 인풋의 필수 입력 여부 설정은 Platform Console에 있는 스키마 메뉴에서 진행 한다. 필수 입력으로 설정된 텍스트 필드는 인풋은 사용자 입력 시 설정 조건에 따라 경고성 Helper Text가 자동 출력 된다.

...

...

...

상태 정보

텍스트 필드의 인풋의 상태는 아래와 같이 4가지로 표현되며, 모든 텍스트 필드 컴포넌트에 공통으로 적용되어 있다표현된다.

Normal	Hover
Active	Disabled

Typing	Filled
Success	Error

...

셋팅 옵션

BackOffice Builder의 Text Field > Setting > [Option] 설정을 통해 입력 텍스트 필드 내용을 인풋의 구성을 변경한다.

...

1. Size

텍스트 필드의 인풋의 크기는 아래와 같이 3가지로 선택 할 수 있다.

...

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 영역에서 애드온 기능을 사용할 수 있다. 주로 입력 받을 값에 고정으로 들어가는 텍스트를 미리 입력필드 입력 필드 밖에 고정하는 용도로 사용된다.

Setting	Result

...

9. Prefix/Suffix

Text Options 영역에서 Fix 기능을 사용할 수 있다. 텍스트를 입력필드 입력 필드 안에 고정하여 출력한다.

Setting	Result

...

10. Text Limit

Text Options 영역에서 입력 받을 텍스트 길이에 제한 조건을 설정 할 수 있다.

...

...