SSelect `<s-select>`

목록에서 옵션 하나를 고르는 드롭다운입니다. SSelect은(는) Shopify Polaris <s-select> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

정해진 선택지에 사용하세요. select는 판매자가 미리 정의된 목록에서 고를 때 적합합니다. 판매자가 직접 값을 입력하거나 긴 목록을 뒤져야 한다면, 입력하는 동안 일치 항목을 제안하는 텍스트 필드나 검색할 수 있는 드롭다운이 더 잘 맞습니다.
옵션 순서를 의도적으로 정하세요. 관련 옵션을 묶거나, 가장 많이 쓰는 옵션을 먼저 두거나, 자연스러운 순서가 없다면 알파벳순으로 정렬해 판매자가 원하는 항목을 빨리 찾게 합니다.
훑어보기 쉬운 레이블을 작성하세요. 각 옵션에 충분한 맥락을 담아, 판매자가 여러 옵션을 열어 읽어 보지 않고도 구분할 수 있게 합니다.
초기 상태를 의도적으로 고르세요. 명확한 기본값이 있다면 옵션을 미리 선택하고, 판매자가 신중하게 골라야 한다면 placeholder를 사용합니다. 초기 상태를 모호하게 두지 마세요.
검증 문제를 설명하세요. 선택이 필수이거나 유효하지 않을 때 error로 판매자가 무엇을 해야 하는지 구체적으로 알려 줍니다. 상황에 맞는 메시지는 일반적인 메시지보다 폼을 더 빨리 완료하도록 돕습니다.

vue

<SSelect label="Shipping speed" placeholder="Choose a shipping speed" required>
  <SOption value="standard">Standard (5–7 business days)</SOption>
  <SOption value="express">Express (2–3 business days)</SOption>
  <SOption value="overnight">Overnight (next business day)</SOption>
</SSelect>

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

예시

United States

Canada

France

Germany

Value: (none)

vue

<script setup>
import { ref } from 'vue'
import { SSelect, SOption, SOptionGroup } from 'polaris-vue-elements'

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

<template>
  <SSelect label="Shipping region" placeholder="Select a region" v-model="value">
    <SOptionGroup label="North America">
      <SOption value="us">United States</SOption>
      <SOption value="ca">Canada</SOption>
    </SOptionGroup>
    <SOptionGroup label="Europe">
      <SOption value="fr">France</SOption>
      <SOption value="de">Germany</SOption>
    </SOptionGroup>
  </SSelect>
  <p>Value: {{ value }}</p>
</template>

v-model

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

template

<SSelect v-model="value" />

다음과 동일합니다:

template

<SSelect :value="value" @change="value = $event.target.value" />

Props

Prop	타입	설명
`details`	`any`	필드에 대한 맥락이나 안내를 제공하는 추가 텍스트입니다. 이 텍스트는 필드 및 레이블과 함께 표시되어 사용자에게 더 많은 정보나 지침을 제공합니다. 스크린 리더 사용자에게도 노출됩니다.
`disabled`	`boolean`	필드를 비활성화하여 모든 상호작용을 막습니다.
`error`	`any`	사용자에게 오류를 표시합니다. 즉시 해결해야 하는 문제를 전달하기 위해 필드에 특정한 스타일이 적용됩니다.
`icon`	`"color" \| "info" \| "adjust" \| "affiliate" \| "airplane" \| "alert-bubble" \| "alert-circle" \| "alert-diamond" … (553 more)`	필드에 표시할 아이콘 유형입니다.
`id`	`string`	요소의 고유 식별자입니다.
`label`	`any`	필드 레이블로 사용할 콘텐츠입니다.
`labelAccessibilityVisibility`	`"visible" \| "exclusive"`	컴포넌트 레이블의 표시 여부를 변경합니다. - `visible`: 레이블이 모든 사용자에게 표시됩니다. - `exclusive`: 레이블이 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다.
`name`	`string`	가장 가까운 상위 폼 안에서 고유한 필드 식별자입니다.
`placeholder`	`string`	필드에 입력할 값을 설명하는 짧은 힌트입니다.
`required`	`boolean`	필드에 값이 필요한지 여부입니다. 이 요구 사항은 필드에 시맨틱 의미를 더하지만 자동으로 오류를 표시하지는 않습니다. 이 필드가 비어 있을 때 오류를 표시하려면 `error` 속성을 사용하면 됩니다.
`value`	`string`

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

Events

Event	타입
`blur`	`FocusEvent`
`change`	`Event`
`focus`	`FocusEvent`
`input`	`Event`

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

Slots

Slot	설명
`default`	드롭다운 목록에 표시되는 선택 가능한 옵션입니다. 개별 선택 항목으로 옵션 컴포넌트를, 관련 옵션을 레이블이 있는 논리적 그룹으로 정리하기 위해 옵션 그룹 컴포넌트를 허용합니다.
`details`
`error`

SSelect <s-select> ​

모범 사례 ​

예시 ​

v-model ​

Props ​

Events ​

Slots ​