숫자 입력을 위한 입력 컴포넌트이다.
( 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1543733287/Input+Component#Common-options )
Basic
Number 인풋의 기본 UI는 다음과 같다. 사용자가 직접 숫자를 입력 할 수 있고, 입력필드 Active 상태에서는 우측에 나타나는 Up/Down 화살표를 클릭하여 +1 또는 -1을 적용 할 수 있다. Hidden Label 옵션으로 라벨 없이 사용이 가능하며, Disable 옵션을 설정하여 비활성화 상태로 사용 할 수도 있다.
Prefix/Suffix
Number 입력 필드에 Prefix/Suffix 기능을 사용 할 수 있다. 설정한 고정 문구 또는 아이콘을 다음과 같이 출력하며, 사용자가 숫자를 입력하면 설정한 Prefix/Suffix가 숫자 앞/뒤에 표시된다.
Min/Max Value
입력 받을 Number의 최소값과 최대값을 설정 할 수 있다. 예를 들어 Min{10}으로 설정한다면 사용자는 10미만의 숫자는 입력 할 수 없고, Max{100}으로 설정한다면 사용자는 100을 초과하는 숫자를 입력 할 수 없다.
Step
Number 컴포넌트 우측에 있는 Up/Down 화살표에 Step 기능을 옵션으로 설정 할 수 있다. Step의 Default는 위에서 언급한 바와 같이 +1과 -1 이다. Step은 이 증가값을 설정하는 것이다. 예를 들어 Step{10}으로 설정한다면, 버튼 클릭 시 +10 또는 -10으로 값이 변경된다. 이렇게 설정한 +/- 는 사용자가 입력 된 값에 적용된다.
EX 사용자 입력 = 1
EX Up 화살표 1회 클릭 = 1 + 10 = 11
Separator
Number 입력 시 단위 표시를 직접 입력하여 설정 할 수 있다. 예를 들어 입력 받는 숫자값이 한국 금액 정보라면 다음과 같이 설정 할 수 있다. Separator{,}, Separator Digits{3}, Number to Korean{ON} , Korean Unit{원}
#Separator 옵션
Separator : 표시 할 기호를 입력하여 설정
Separator Digits : Separator 기호를 표기할 자릿수 기준 설정
Number to Korean : 한국 금액 표시
Korean Unit : 금액 단위 표기