SSwitch <s-switch>

एक toggle switch जो किसी setting को चालू या बंद करता है। SSwitch Shopify के Polaris <s-switch> web component का typed Vue 3 wrapper है।

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

Best practices

• Switches के साथ save button न रखें। Switch toggle होते ही प्रभावी हो जाता है, इसलिए save button जोड़ने से merchants असमंजस में पड़ जाते हैं कि उनका बदलाव वास्तव में कब लागू होगा।
• Setting को स्पष्ट बनाएँ। ऐसा label लिखें जो merchants को बताए कि switch क्या नियंत्रित करता है और on और off का क्या अर्थ है, ताकि उन्हें केवल पता लगाने के लिए उसे बदलना न पड़े।
• परिणामों का वर्णन करें। details का उपयोग यह समझाने के लिए करें कि switch toggle करने पर क्या बदलता है, ख़ासकर उन settings के लिए जो महत्वपूर्ण features या data को प्रभावित करती हैं, ताकि merchants आत्मविश्वास से निर्णय ले सकें।
• संबंधित switches को समूह और क्रम में रखें। जब किसी page पर कई switches हों, तो संबंधित settings को तार्किक क्रम में एक साथ रखें ताकि merchants उन्हें आसानी से ढूँढ और configure कर सकें।
• बताएँ कि switch उपलब्ध क्यों नहीं है। जब कोई switch permissions, dependencies या plan की सीमाओं के कारण disabled हो, तो merchants को बताएँ कि क्यों, क्या यह अस्थायी है, और उसे unlock करने के लिए उन्हें क्या करना होगा।

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

सभी सुझावों के लिए <s-switch> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

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 से bind होता है और change DOM event को सुनता है।

<SSwitch v-model="value" />

इसके बराबर है:

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

Props

Prop	Type	विवरण
accessibilityLabel	string	screen readers जैसी assistive technologies इस्तेमाल करने वाले users के लिए label। सेट होने पर, दिए गए children या label की घोषणा नहीं की जाएगी। इसका उपयोग किसी control को बिना visual label के दिखाने के लिए भी किया जा सकता है, जबकि screen readers इस्तेमाल करने वाले users को संदर्भ मिलता रहता है।
checked	boolean	क्या control active है।
defaultChecked	boolean	क्या control डिफ़ॉल्ट रूप से active है।
details	any	field के लिए संदर्भ या मार्गदर्शन देने वाला अतिरिक्त text। user को अधिक जानकारी या निर्देश देने के लिए यह text field और उसके label के साथ दिखाया जाता है। यह screen reader users को भी उपलब्ध कराया जाएगा।
disabled	boolean	control को disable करता है, जिससे कोई भी interaction संभव नहीं रहता।
error	any	user को error बताएँ। field को एक विशेष style दिया जाएगा, ताकि ऐसी समस्याएँ बताई जा सकें जिन्हें तुरंत हल करना ज़रूरी है।
label	any	control label के रूप में उपयोग की जाने वाली visual सामग्री।
labelAccessibilityVisibility	"visible" | "exclusive"	component के label की visibility बदलता है। - visible: label सभी users को दिखाई देता है। - exclusive: label दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
name	string	control के लिए identifier, जो सबसे नज़दीकी containing Form component के भीतर unique हो।
required	boolean	क्या field के लिए कोई मान ज़रूरी है। यह आवश्यकता field में semantic अर्थ जोड़ती है, लेकिन इससे अपने आप कोई error नहीं दिखेगा। यदि आप चाहते हैं कि यह field खाली होने पर error दिखे, तो आप error property के साथ ऐसा कर सकते हैं।
value	string	control के checked होने पर form data में उपयोग होने वाला मान।

Events

Event	Type
blur	FocusEvent
change	Event
input	Event

इन्हें <SSwitch> पर @blur जैसे listeners से सुनें।