SNumberField <s-number-field>
최솟값, 최댓값, 증감 단위를 선택적으로 지정할 수 있는 숫자 입력 필드입니다. SNumberField은(는) Shopify Polaris <s-number-field> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.
ts
import { SNumberField } from 'polaris-vue-elements'모범 사례
- 순수한 숫자 값에만 사용하세요. 수량, 측정값, 백분율 같은 값에 사용합니다. 상품 코드나 전화번호처럼 문자나 기호가 포함될 수 있는 값이라면 대신
STextField를 사용합니다. - 단위를 표시하세요.
prefix나suffix로 숫자가 무엇을 측정하는지 알려, 판매자가 달러를 입력하는지 킬로그램이나 백분율을 입력하는지 추측하지 않게 합니다. - 비즈니스 규칙에 맞는 한도를 설정하세요. 실제로 허용되는 범위를 반영한
min과max값을 지정하면, 판매자가 폼을 제출하기 전에 유효한 값을 입력하도록 이끌 수 있습니다. - 검증하고 오류를 설명하세요. 모든 숫자 입력을 검사하고, 실패하면 일반적인 메시지 대신
error로 무엇이 잘못되었고 어떻게 고치면 되는지 정확히 알려 줍니다.
vue
<SNumberField label="Discount" suffix="%" :min="0" :max="100" />전체 가이드는 <s-number-field>에 대한 Shopify 모범 사례(영어)를 참고하세요.
예시
Value: 1
vue
<script setup>
import { ref } from 'vue'
import { SNumberField } from 'polaris-vue-elements'
const value = ref('1')
</script>
<template>
<SNumberField label="Quantity" :min="0" :max="100" :step="1" v-model="value" />
<p>Value: {{ value }}</p>
</template>v-model
<SNumberField>의 v-model은 value property에 바인딩되고 input DOM event를 수신합니다.
template
<SNumberField v-model="value" />다음과 동일합니다:
template
<SNumberField :value="value" @input="value = $event.target.value" />Props
| Prop | 타입 | 설명 |
|---|---|---|
autocomplete | "one-time-code" | "cc-number" | "cc-csc" | "on" | "off" | "shipping one-time-code" | "billing one-time-code" | "shipping cc-number" … (3 more) | 필드에 입력될 콘텐츠에 대한 힌트입니다. on(기본값)으로 설정하면 필드가 자동 완성을 지원해야 하지만 입력될 콘텐츠에 대한 추가적인 의미 정보는 없음을 나타냅니다. off로 설정하면 이 필드에 민감한 정보나 일회용 코드처럼 저장되지 않는 콘텐츠가 들어간다는 것을 나타냅니다. 또는 자동 완성 시 이 필드에 입력되기를 원하는 구체적인 데이터를 설명하는 값을 지정할 수도 있습니다. |
defaultValue | string | 필드의 기본값입니다. |
details | any | 필드에 대한 맥락이나 안내를 제공하는 추가 텍스트입니다. 이 텍스트는 필드 및 레이블과 함께 표시되어 사용자에게 더 많은 정보나 지침을 제공합니다. 스크린 리더 사용자에게도 노출됩니다. |
disabled | boolean | 필드를 비활성화하여 모든 상호작용을 막습니다. |
error | any | 사용자에게 오류를 표시합니다. 즉시 해결해야 하는 문제를 전달하기 위해 필드에 특정한 스타일이 적용됩니다. |
id | string | 요소의 고유 식별자입니다. |
inputMode | "decimal" | "numeric" | 모바일 기기에 표시할 가상 키보드 유형입니다. - decimal: 소수점이 있는 숫자 키보드를 표시하며, 가격이나 측정값에 적합합니다. - numeric: 소수점이 없는 숫자 키보드를 표시하며, 수량 같은 정수에 적합합니다. inputmode 속성에 대해 자세히 알아보세요. |
label | any | 필드 레이블로 사용할 콘텐츠입니다. |
labelAccessibilityVisibility | "visible" | "exclusive" | 컴포넌트 레이블의 표시 여부를 변경합니다. - visible: 레이블이 모든 사용자에게 표시됩니다. - exclusive: 레이블이 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다. |
max | number | 필드에서 허용하는 가장 큰 소수 또는 정수입니다. step과 함께 사용하면 값이 최댓값으로 내림됩니다. 참고: 사용자는 여전히 키보드로 최댓값보다 큰 숫자를 입력할 수 있습니다. 적절한 유효성 검사를 추가하는 것은 개발자의 몫입니다. |
min | number | 필드에서 허용하는 가장 작은 소수 또는 정수입니다. step과 함께 사용하면 값이 최솟값으로 올림됩니다. 참고: 사용자는 여전히 키보드로 최솟값보다 작은 숫자를 입력할 수 있습니다. 적절한 유효성 검사를 추가하는 것은 개발자의 몫입니다. |
name | string | 가장 가까운 상위 폼 안에서 고유한 필드 식별자입니다. |
placeholder | string | 필드에 입력할 값을 설명하는 짧은 힌트입니다. |
prefix | string | 필드의 편집 가능한 부분 바로 앞에 표시되는 값입니다. "https://"나 "+353"처럼 값에 암묵적으로 포함되는 부분을 표시할 때 유용합니다. 사용자가 편집할 수 없으며 필드 값에도 포함되지 않습니다. 사용자가 입력란과 상호작용하기 전까지는 표시되지 않을 수 있습니다. 예를 들어 사용자가 입력란에 포커스하기 전까지는 인라인 레이블이 접두사 자리에 표시될 수 있습니다. |
readOnly | boolean | 사용자가 필드를 편집할 수 없습니다. 포커스는 가능하며 스크린 리더가 읽어 줍니다. |
required | boolean | 필드에 값이 필요한지 여부입니다. 이 요구 사항은 필드에 시맨틱 의미를 더하지만 자동으로 오류를 표시하지는 않습니다. 이 필드가 비어 있을 때 오류를 표시하려면 error 속성을 사용하면 됩니다. |
step | number | 값이 증가하거나 감소하는 단위입니다. 정수나 소수일 수 있습니다. step과 함께 max나 min이 지정된 경우 버튼으로 값을 증가/감소시키면 최종 값은 가장 가까운 유효한 값이 아니라 항상 max나 min으로 맞춰집니다. |
suffix | string | 필드의 편집 가능한 부분 바로 뒤에 표시되는 값입니다. "@shopify.com"이나 "%"처럼 값에 암묵적으로 포함되는 부분을 표시할 때 유용합니다. 사용자가 편집할 수 없으며 필드 값에도 포함되지 않습니다. 사용자가 입력란과 상호작용하기 전까지는 표시되지 않을 수 있습니다. 예를 들어 사용자가 입력란에 포커스하기 전까지는 인라인 레이블이 접미사 자리에 표시될 수 있습니다. |
value | string |
위의 일부 타입 열은 읽기 쉽도록 축약되었습니다. 전체 union은 라이브러리에서 생성된 TypeScript 타입(
src/lib/generated/types.ts)에 있습니다.
Events
| Event | 타입 |
|---|---|
blur | FocusEvent |
change | Event |
focus | FocusEvent |
input | Event |
<SNumberField>에서 @blur 형식의 리스너로 이 events를 수신하세요.
Slots
| Slot | 설명 |
|---|---|
details | |
error |