STextField <s-text-field>

라벨, placeholder, 유효성 검사 오류, 도움말 텍스트를 갖춘 한 줄 텍스트 입력 필드입니다. STextField은(는) Shopify Polaris <s-text-field> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

import { STextField } from 'polaris-vue-elements'

모범 사례

• 어떤 입력을 기대하는지 분명히 하세요. 무엇을 어떤 형식으로 입력해야 하는지 알려 주는 label과 placeholder를 작성합니다. 모호한 문구는 추측, 검증 오류, 불만으로 이어집니다.
• prefix나 suffix로 맥락을 더하세요. prefix와 suffix로 값의 종류와 형식을 보여 줍니다. 예를 들어 판매자가 전체 URL을 입력해야 하는지 하위 도메인만 입력하면 되는지, 전체 가격인지 금액만인지를 알려 줄 수 있습니다.
• 제약은 실제 요구 사항에 근거하세요. 임의의 숫자가 아니라 실제 비즈니스 요구에 따라 minLength, maxLength, 검증 규칙을 설정하고, 판매자에게 그 내용을 알려 줍니다.
• 피드백은 일찍, 구체적으로 주세요. 제출할 때만이 아니라 입력하는 동안 입력이 유효한지 알려 줍니다. 유효하지 않다면 error로 무엇이 잘못되었고 어떻게 고치면 되는지 설명합니다.

<STextField label="Store address" prefix="https://" suffix=".myshopify.com" />

전체 가이드는 <s-text-field>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

Value: (empty)

<script setup>
import { ref } from 'vue'
import { STextField } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <STextField label="Your name" placeholder="Jane Doe" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

<STextField>의 v-model은 value property에 바인딩되고 input DOM event를 수신합니다.

<STextField v-model="value" />

다음과 동일합니다:

<STextField :value="value" @input="value = $event.target.value" />

Props

Prop	타입	설명
autocomplete	"language" | "organization" | "name" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" … (84 more)	필드에 입력될 콘텐츠에 대한 힌트입니다. on(기본값)으로 설정하면 필드가 자동 완성을 지원해야 하지만 입력될 콘텐츠에 대한 추가적인 의미 정보는 없음을 나타냅니다. off로 설정하면 이 필드에 민감한 정보나 일회용 코드처럼 저장되지 않는 콘텐츠가 들어간다는 것을 나타냅니다. 또는 자동 완성 시 이 필드에 입력되기를 원하는 구체적인 데이터를 설명하는 값을 지정할 수도 있습니다.
defaultValue	string	필드의 기본값입니다.
details	any	필드에 대한 맥락이나 안내를 제공하는 추가 텍스트입니다. 이 텍스트는 필드 및 레이블과 함께 표시되어 사용자에게 더 많은 정보나 지침을 제공합니다. 스크린 리더 사용자에게도 노출됩니다.
disabled	boolean	필드를 비활성화하여 모든 상호작용을 막습니다.
error	any	사용자에게 오류를 표시합니다. 즉시 해결해야 하는 문제를 전달하기 위해 필드에 특정한 스타일이 적용됩니다.
icon	"cart-filled" | "channels-filled" | "home-filled" | "order-filled" | "person-filled" | "product-filled" | "color" | "info" … (597 more)	필드에 표시할 아이콘 유형입니다.
id	string	요소의 고유 식별자입니다.
label	any	필드 레이블로 사용할 콘텐츠입니다.
labelAccessibilityVisibility	"visible" | "exclusive"	컴포넌트 레이블의 표시 여부를 변경합니다. - visible: 레이블이 모든 사용자에게 표시됩니다. - exclusive: 레이블이 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다.
maxLength	number	허용되는 최대 문자 수를 지정합니다.
minLength	number	허용되는 최소 문자 수를 지정합니다.
name	string	가장 가까운 상위 폼 안에서 고유한 필드 식별자입니다.
placeholder	string	필드에 입력할 값을 설명하는 짧은 힌트입니다.
prefix	string	필드의 편집 가능한 부분 바로 앞에 표시되는 값입니다. "https://"나 "+353"처럼 값에 암묵적으로 포함되는 부분을 표시할 때 유용합니다. 사용자가 편집할 수 없으며 필드 값에도 포함되지 않습니다. 사용자가 입력란과 상호작용하기 전까지는 표시되지 않을 수 있습니다. 예를 들어 사용자가 입력란에 포커스하기 전까지는 인라인 레이블이 접두사 자리에 표시될 수 있습니다.
readOnly	boolean	사용자가 필드를 편집할 수 없습니다. 포커스는 가능하며 스크린 리더가 읽어 줍니다.
required	boolean	필드에 값이 필요한지 여부입니다. 이 요구 사항은 필드에 시맨틱 의미를 더하지만 자동으로 오류를 표시하지는 않습니다. 이 필드가 비어 있을 때 오류를 표시하려면 error 속성을 사용하면 됩니다.
suffix	string	필드의 편집 가능한 부분 바로 뒤에 표시되는 값입니다. "@shopify.com"이나 "%"처럼 값에 암묵적으로 포함되는 부분을 표시할 때 유용합니다. 사용자가 편집할 수 없으며 필드 값에도 포함되지 않습니다. 사용자가 입력란과 상호작용하기 전까지는 표시되지 않을 수 있습니다. 예를 들어 사용자가 입력란에 포커스하기 전까지는 인라인 레이블이 접미사 자리에 표시될 수 있습니다.
value	string	필드의 현재 값입니다. 생략하면 필드가 비어 있습니다.

위의 일부 타입 열은 읽기 쉽도록 축약되었습니다. 전체 union은 라이브러리에서 생성된 TypeScript 타입(src/lib/generated/types.ts)에 있습니다.

Events

Event	타입
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

<STextField>에서 @blur 형식의 리스너로 이 events를 수신하세요.

Slots

Slot	설명
accessory	텍스트 필드 옆에 표시되는 추가 콘텐츠로, 일반적으로 도움말 툴팁을 열거나 모달을 띄우는 등 관련 기능을 제공하는 아이콘이나 버튼입니다.
details
error