Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 11 Next »

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

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 innerfix

입력 필드 내에 고정 문구를 prefix, suffix로 표시

MEMO Vertical Text Field

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

MEMO Required Text Field

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

TOBE Text Field with Addon : 추후 Addon 셀렉트 기능 필요 (현재는 텍스트만 입력 가능)

TOBE Text Field with fixText : 추후 아이콘 추가 기능 필요 (현재는 텍스트만 입력 가능)

상태 정보

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

Normal

Hover

Active

Disabled

TOBE 추후 Clear Button, Success/Error 아이콘 표시 설정 옵션 필요

Typing

Filled

Success

Error

UI 구조

텍스트 필드의 기본 구조는 다음과 같다.

  1. Label : 입력 필드에 입력 할 정보가 무엇인지 제목 표시

  2. Input Field : 라벨 하단에 있는 텍스트 입력 영역으로, 입력 정보가 실시간으로 출력되는 영역

  3. Tooltip : 물음표 아이콘이 라벨 옆에 출력되며, 마우스 오버 시 출력되는 안내 문구

  4. Placeholder : 입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라짐

  5. Helper Text : 필드 하단에 고정되어 노출되는 도움말 문구 ( ASIS Comment, TOBE Helper Text )

  6. Cursor : 사용자에 의해 입력된 텍스트의 필드 내의 현재 입력 위치 표시

  7. Input Text : 사용자가 입력 필드에 작성한 텍스트

  8. NEW Clear Button : 필드에 입력한 정보를 한번에 삭제

셋팅 옵션

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

1. Size

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

Setting

Result

https://ionsdp.atlassian.net/browse/ICE4-2002

Label(버튼이름)에 입력된 텍스트 길이에 따라 입력 필드의 가로 길이는 가변적으로 변한다. 만약 고정 사이즈의 입력 필드가 필요하다면, Fixed Field Size를 조절하여 직접 사이즈를 지정 할 수도 있다.

2. Default Value

텍스트 필드 내에 디폴트 값을 지정하는 기능이다. 사용자는 디폴트 값을 확인하고 그대로 사용하거나, 삭제 및 수정 할 수 있다. 플레이스 홀더 문구보다 상위에 출력된다.

Setting

Result

3. Placeholder

입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라진다.

Setting

Result

4. Tooltip

툴팁을 사용하면, 라벨 옆에 물음표 아이콘이 추가되고, 마우스 오버 시 입력한 안내 문구가 출력된다.

Setting

Result

5. Helper text (=Comment)

입력 필드 하단에 고정되어 노출되는 도움말 문구이다. 사용자의 입력 성공/실패 여부와 상관 없이

Setting

Result

6. Field Size

Setting

Result

7. Text Options

제공하는 Text 옵션은 총 3가지 타입이다.

  • Addon Before/After : 페이지 우측 상단에 표시되는 경고성 메시지로 닫기 버튼과 아이콘이 표시됨

  • Prefix/Suffix : 사용자에게 확인을 요청하는 간단한 대화 상자형 메시지

  • Text Limit : 사용자가

Addon Before/After

Setting

Result

7. Prefix/Suffix

Setting

Result

Setting

Result

9.

  • No labels