SSwitch <s-switch>

설정을 켜고 끄는 토글 스위치입니다. SSwitch은(는) Shopify Polaris <s-switch> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• switch를 저장 버튼과 함께 쓰지 마세요. switch는 전환하는 즉시 적용되므로, 저장 버튼을 추가하면 판매자가 변경 사항이 언제 실제로 적용되는지 헷갈리게 됩니다.
• 어떤 설정인지 분명히 하세요. switch가 무엇을 제어하고 켜짐과 꺼짐이 무엇을 뜻하는지 알려 주는 label을 작성해, 판매자가 알아보려고 직접 전환해 볼 필요가 없게 합니다.
• 결과를 설명하세요. details로 switch를 전환하면 무엇이 바뀌는지 설명합니다. 특히 중요한 기능이나 데이터에 영향을 주는 설정이라면 판매자가 확신을 갖고 결정할 수 있게 합니다.
• 관련된 switch를 묶고 정렬하세요. 페이지에 switch가 여러 개 있다면 관련 설정을 논리적인 순서로 함께 두어 판매자가 쉽게 찾고 설정할 수 있게 합니다.
• switch를 사용할 수 없는 이유를 설명하세요. 권한, 의존 관계, 요금제 한도 때문에 switch가 disabled 상태라면 그 이유와 일시적인지 여부, 그리고 사용하려면 무엇을 해야 하는지 판매자에게 알려 줍니다.

<SSwitch label="Send order confirmation emails" details="Customers get an email as soon as they place an order." />

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

예시

On: false

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

const value = ref(false)
</script>

<template>
  <SSwitch label="Enable notifications" v-model="value" />
  <p>On: {{ value }}</p>
</template>

v-model

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

<SSwitch v-model="value" />

다음과 동일합니다:

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

Props

Prop	타입	설명
accessibilityLabel	string	스크린 리더 같은 보조 기술 사용자를 위한 레이블입니다. 설정하면 제공된 자식 요소나 label은 읽히지 않습니다. 시각적 레이블 없이 컨트롤을 표시하면서도 스크린 리더 사용자에게 맥락을 제공하는 데 사용할 수도 있습니다.
checked	boolean	컨트롤이 활성 상태인지 여부입니다.
defaultChecked	boolean	컨트롤이 기본적으로 활성 상태인지 여부입니다.
details	any	필드에 대한 맥락이나 안내를 제공하는 추가 텍스트입니다. 이 텍스트는 필드 및 레이블과 함께 표시되어 사용자에게 더 많은 정보나 지침을 제공합니다. 스크린 리더 사용자에게도 노출됩니다.
disabled	boolean	컨트롤을 비활성화하여 모든 상호작용을 막습니다.
error	any	사용자에게 오류를 표시합니다. 즉시 해결해야 하는 문제를 전달하기 위해 필드에 특정한 스타일이 적용됩니다.
label	any	컨트롤 레이블로 사용할 시각적 콘텐츠입니다.
labelAccessibilityVisibility	"visible" | "exclusive"	컴포넌트 레이블의 표시 여부를 변경합니다. - visible: 레이블이 모든 사용자에게 표시됩니다. - exclusive: 레이블이 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다.
name	string	가장 가까운 상위 Form 컴포넌트 안에서 고유한 컨트롤 식별자입니다.
required	boolean	필드에 값이 필요한지 여부입니다. 이 요구 사항은 필드에 시맨틱 의미를 더하지만 자동으로 오류를 표시하지는 않습니다. 이 필드가 비어 있을 때 오류를 표시하려면 error 속성을 사용하면 됩니다.
value	string	컨트롤이 체크되었을 때 폼 데이터에 사용되는 값입니다.

Events

Event	타입
blur	FocusEvent
change	Event
input	Event

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