SCheckbox <s-checkbox>
예/아니요 선택을 위한 단일 체크박스로, v-model로 체크 상태에 바인딩됩니다. SCheckbox은(는) Shopify Polaris <s-checkbox> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.
ts
import { SCheckbox } from 'polaris-vue-elements'모범 사례
- 각 체크박스를 독립적으로 유지하세요. 판매자는 한 체크박스가 다른 체크박스에 영향을 주지 않는 상태에서 원하는 조합으로 옵션을 선택할 수 있어야 합니다.
- 모든 체크박스에 설명적인
label을 지정하세요. 특히 체크박스가 설정을 켜고 끄는 경우에 중요하며, 판매자가 무엇을 활성화하는지 정확히 알 수 있어야 합니다. - 옵션을 논리적인 순서로 정렬하세요. 알파벳순, 숫자순 또는 시간순으로 정렬해 판매자가 원하는 옵션을 빠르게 찾게 합니다.
indeterminate는 부분적인 "전체 선택"에만 사용하세요. 그룹의 일부 항목만 선택된 경우 "전체 선택" 체크박스에 사용합니다.- 맥락이 도움이 될 때
details를 추가하세요. 레이블만으로 충분하지 않을 때에만 옵션의 기능에 대한 추가 설명으로 사용합니다.
vue
<SCheckbox
label="Send order confirmation emails"
details="Customers get an email as soon as their order is placed."
/>전체 가이드는 <s-checkbox>에 대한 Shopify 모범 사례(영어)를 참고하세요.
예시
Checked: false
vue
<script setup>
import { ref } from 'vue'
import { SCheckbox } from 'polaris-vue-elements'
const value = ref(false)
</script>
<template>
<SCheckbox label="Send me marketing emails" v-model="value" />
<p>Checked: {{ value }}</p>
</template>v-model
<SCheckbox>의 v-model은 checked property에 바인딩되고 change DOM event를 수신합니다.
template
<SCheckbox v-model="value" />다음과 동일합니다:
template
<SCheckbox :checked="value" @change="value = $event.target.checked" />Props
| Prop | 타입 | 설명 |
|---|---|---|
accessibilityLabel | string | 스크린 리더 같은 보조 기술 사용자를 위한 레이블입니다. 설정하면 제공된 자식 요소나 label은 읽히지 않습니다. 시각적 레이블 없이 컨트롤을 표시하면서도 스크린 리더 사용자에게 맥락을 제공하는 데 사용할 수도 있습니다. |
checked | boolean | 컨트롤이 활성 상태인지 여부입니다. |
defaultChecked | boolean | 컨트롤이 기본적으로 활성 상태인지 여부입니다. |
defaultIndeterminate | boolean | 비제어 컴포넌트의 초기 indeterminate 상태입니다. 체크박스를 indeterminate 상태로 시작하되 이후에는 제어할 필요가 없을 때 사용합니다. 이 값은 indeterminate가 명시적으로 설정되거나 사용자가 클릭으로 체크박스 상태를 변경할 때까지 적용됩니다. |
details | any | 필드에 대한 맥락이나 안내를 제공하는 추가 텍스트입니다. 이 텍스트는 필드 및 레이블과 함께 표시되어 사용자에게 더 많은 정보나 지침을 제공합니다. 스크린 리더 사용자에게도 노출됩니다. |
disabled | boolean | 컨트롤을 비활성화하여 모든 상호작용을 막습니다. |
error | any | 사용자에게 오류를 표시합니다. 즉시 해결해야 하는 문제를 전달하기 위해 필드에 특정한 스타일이 적용됩니다. |
indeterminate | boolean | 체크박스를 indeterminate 상태(체크도 해제도 아닌 상태)로 표시할지 여부로, 일반적으로 계층형 목록에서 부분 선택을 나타내는 데 사용합니다. 이 시각적 상태는 외관상으로만 checked prop보다 우선합니다. 폼 제출 값은 여전히 checked prop에 의해 결정됩니다. indeterminate가 명시적으로 설정되지 않았고 사용자 상호작용으로 변경되지 않았다면 defaultIndeterminate의 값을 반환합니다. |
label | any | 컨트롤 레이블로 사용할 시각적 콘텐츠입니다. |
labelAccessibilityVisibility | "visible" | "exclusive" | 컴포넌트 레이블의 표시 여부를 변경합니다. - visible: 레이블이 모든 사용자에게 표시됩니다. - exclusive: 레이블이 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다. |
name | string | 가장 가까운 상위 Form 컴포넌트 안에서 고유한 컨트롤 식별자입니다. |
required | boolean | 필드에 값이 필요한지 여부입니다. 이 요구 사항은 필드에 시맨틱 의미를 더하지만 자동으로 오류를 표시하지는 않습니다. 이 필드가 비어 있을 때 오류를 표시하려면 error 속성을 사용하면 됩니다. |
value | string | 컨트롤이 체크되었을 때 폼 데이터에 사용되는 값입니다. |
Events
| Event | 타입 |
|---|---|
blur | FocusEvent |
change | Event |
input | Event |
<SCheckbox>에서 @blur 형식의 리스너로 이 events를 수신하세요.
Slots
| Slot | 설명 |
|---|---|
details | |
error |