숫자 필드
숫자를 입력할 수 있습니다. 입력 데이터는 다른 워크플로우나 컴포넌트에서 사용할 수 있습니다.
![](/img/guides/components/number-field/component.png)
프로퍼티
프로퍼티 | 타입 | 설명 |
---|---|---|
이름 (name) | string | 숫자 필드 컴포넌트의 고유 이름 |
레이블 (label) | string | 숫자 필드 좌측에 표기되는 텍스트 |
기본값 (defaultValue) | string | 숫자 필드에 적용되는 기본값 템플릿 |
형식 (isPercentage) | boolean | true : 데이터를 퍼센트 형식으로 표시false : 데이터를 일반 숫자 형식으로 표시 |
소수점 자릿수 (decimalPlaces) | number | 0부터 20사이의 소수점 자릿수 |
소수점 자릿수 채우기 (isDecimalPlacesFilled) | boolean | 설정된 소수점 자릿수만큼 0으로 채우는 기능 활성화 여부 |
콤마 표시 여부 (useGrouping) | boolean | 1,000의 자리마다 콤마 표시 여부 |
유효성 검사 (validator) | string | 1,000의 자리마다 콤마 표시 여부 |
플레이스홀더 (placeholder) | string | 숫자 필드에 적용되는 플레이스홀더 |
컴포넌트 비활성화 (isDisabled) | boolean | 숫자 필드 비활성화 여부 |
컴포넌트 숨김 (isHidden) | boolean | 배포된 페이지에서 숫자 필드 숨김 여부 |
레이블 길이 (labelWidth) | string | 숫자 필드에서 좌측 레이블이 차지하는 길이 |
정렬 (textAlign) | 'left' | 'right' | 필드 내부 데이터를 정렬합니다. |
이름 (name)
숫자 필드 컴포넌트의 고유 이름을 입력할 수 있는 프로퍼티입니다. 이름 규칙을 참고해주세요.
![](/img/guides/components/number-field/name.png)
레이블 (label)
숫자 필드 좌측에 표기되는 텍스트를 입력할 수 있는 프로퍼티입니다. (템플릿 텍스트 입력 가능)
![](/img/guides/components/number-field/label.png)
기본값 (defaultValue)
워크플로우의 실행 결과로 옵션을 추가하거나 코드 또는 직접 값을 입력하여 기본값을 설정할 수 있습니다.
![](/img/guides/components/number-field/default_value.png)
형식 (isPercentage)
숫자를 표시하는 방법입니다. 일반을 선택하면 숫자를 일반 형식으로 표시합니다.
![](/img/guides/components/number-field/is_percent_false.png)
퍼센트를 선택하면 숫자를 퍼센트 형식으로 표시합니다.
![](/img/guides/components/number-field/is_percent_true.png)
형식을 변경해도 상태 값은 변경되지 않습니다.
소수점 자릿수 (decimalPlaces)
최대 소수점 자리를 지정합니다. 0부터 20사이의 소수점 자리수를 입력할 수 있습니다.
![](/img/guides/components/number-field/decimal_places.png)
소수점 자릿수 채우기 (isDecimalPlacesFilled)
스위치를 활성화하면 입력한 값의 소수점 자릿수가 설정된 소수점 자릿수보다 적을 경우 나머지 자릿수를 0으로 채웁니다.
![](/img/guides/components/number-field/is_decimal_places_filled.png)
콤마 표시 여부 (useGrouping)
스위치를 활성화하면 1,000의 자리마다 콤마를 표시합니다.
![](/img/guides/components/number-field/use_grouping.png)
유효성 검사 (validator)
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 유효성 검사를 설정할 수 있습니다.
필드 값의 유효성을 검사하고 에러 메시지를 표시할 수 있습니다.
![](/img/guides/components/number-field/validator.png)
다음과 같이 true
, false
를 반환하는 조건을 입력할 경우 기본 에러메세지가 표시됩니다.
value !== 'Hello World'
![](/img/guides/components/validator_none_message.png)
삼항 연산자를 이용해 원하는 에러 메세지를 입력할 수 있습니다.
value !== 'Hello World' ? "value is not Hello World" : undefined
![](/img/guides/components/validator_message.png)
플레이스홀더 (placeholder)
직접 값을 입력하여 필드의 플레이스홀더를 설정할 수 있습니다. 플레이스홀더를 설정하지 않으면 각 필드의 기본 플레이스홀더가 표시됩니다.
![](/img/guides/components/number-field/placeholder.png)
컴포넌트 비활성화 (isDisabled)
컴포넌트의 비활성화 상태를 입력하는 프로퍼티입니다.
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 컴포넌트 비활성화 상태를 설정할 수 있습니다.
값을 true
로 설정할 경우, 해당 컴포넌트가 비활성화 상태로 변경됩니다.
![](/img/guides/components/number-field/is_disabled.png)
컴포넌트 숨김 (isHidden)
컴포넌트의 숨김 상태를 입력하는 프로퍼티입니다.
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 컴포넌트 숨김 상태를 설정할 수 있습니다.
값을 true
로 설정할 경우, 배포된 상태에서는 컴포넌트가 숨겨지고 편집 상태에서는 불투명한 상태로 편집이 가능합니다.
![](/img/guides/components/number-field/is_hidden.png)
레이블 길이 (labelWidth)
레이블 길이를 입력할 수 있는 프로퍼티입니다. px 또는 % 단위에 맞게 값을 입력하면 해당 값에 따라 레이블의 길이가 조정됩니다.
![](/img/guides/components/number-field/label_width.png)
정렬 (textAlign)
필드 내부 데이터를 선택한 방향에 맞게 정렬합니다.
![](/img/guides/components/number-field/text_align.png)
상태
프로퍼티 | 타입 | 설명 |
---|---|---|
값 (value) | number | 숫자 필드의 value |