SChoiceList `<s-choice-list>`

하나 또는 여러 옵션을 고르기 위한 라디오 버튼 또는 체크박스 그룹입니다. SChoiceList은(는) Shopify Polaris <s-choice-list> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

옵션에 맞는 선택 모드를 사용하세요. 결제 수단이나 배송 속도처럼 서로 배타적인 옵션에는 단일 선택을 유지하고, 판매자가 여러 개를 고를 수 있다면 multiple을 설정합니다.
선택지 레이블은 결과를 설명하게 하세요. "Email notifications for new orders"가 "Email"보다 더 많은 것을 알려 줍니다. 레이블은 짧게 유지하되, 그것만으로도 의미가 통할 만큼 명확해야 합니다.
label은 질문이나 서술문으로 작성하세요. "Which shipping method?"나 "Select notification preferences" 같은 제목이 "Options"나 "Settings" 같은 모호한 단어보다 판매자에게 더 많은 정보를 줍니다.
복잡한 선택지는 details 슬롯에서 설명하세요. 판매자가 그 옵션을 선택했을 때의 의미를 이해해야 한다면 개별 SChoice에 details를 추가합니다.
error 메시지를 구체적으로 작성하세요. 일반적인 "Required field" 대신 "Select at least one notification preference"처럼 무엇이 빠졌는지 정확히 알려 줍니다.

vue

<SChoiceList label="Which shipping method?">
  <SChoice value="standard">Standard shipping</SChoice>
  <SChoice value="express">
    Express shipping
    <template #details>
      <SText>Costs more, but orders arrive in 1–2 business days.</SText>
    </template>
  </SChoice>
</SChoiceList>

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

예시

SMS

Push notification

Selected: (none)

vue

<script setup>
import { ref } from 'vue'
import { SChoiceList, SChoice } from 'polaris-vue-elements'

const value = ref([])
</script>

<template>
  <SChoiceList label="Notify me by" multiple v-model="value">
    <SChoice value="email">Email</SChoice>
    <SChoice value="sms">SMS</SChoice>
    <SChoice value="push">Push notification</SChoice>
  </SChoiceList>
  <p>Selected: {{ value.join(', ') }}</p>
</template>

v-model

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

template

<SChoiceList v-model="value" />

다음과 동일합니다:

template

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

Props

Prop	타입	설명
`details`	`any`	필드에 대한 맥락이나 안내를 제공하는 추가 텍스트입니다. 이 텍스트는 필드 및 레이블과 함께 표시되어 사용자에게 더 많은 정보나 지침을 제공합니다. 스크린 리더 사용자에게도 노출됩니다.
`disabled`	`boolean`	필드를 비활성화하여 모든 사용자 상호작용을 막을지 여부입니다. `true`이면 자식 선택 항목의 `disabled` 속성은 무시됩니다.
`error`	`any`	사용자에게 오류를 표시합니다. 즉시 해결해야 하는 문제를 전달하기 위해 필드에 특정한 스타일이 적용됩니다.
`label`	`any`	필드 레이블로 사용할 콘텐츠입니다.
`labelAccessibilityVisibility`	`"visible" \| "exclusive"`	컴포넌트 레이블의 표시 여부를 변경합니다. - `visible`: 레이블이 모든 사용자에게 표시됩니다. - `exclusive`: 레이블이 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다.
`multiple`	`boolean`	여러 항목을 선택할 수 있는지 여부입니다.
`name`	`string`	가장 가까운 상위 폼 안에서 고유한 필드 식별자입니다.
`values`	`string[]`	선택된 옵션들의 `value` 배열입니다. 자식 옵션의 `selected` prop을 설정하기 위한 편의용 prop입니다.

Events

Event	타입
`change`	`Event`
`input`	`Event`

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

Slots

Slot	설명
`default`	사용자가 선택할 수 있는 선택 항목입니다. 선택 항목 컴포넌트를 받습니다.

SChoiceList <s-choice-list> ​

모범 사례 ​

예시 ​

v-model ​

Props ​

Events ​

Slots ​