SChoiceList <s-choice-list>

एक या कई विकल्प चुनने के लिए radio buttons या checkboxes का समूह। SChoiceList Shopify के Polaris <s-choice-list> web component का typed Vue 3 wrapper है।

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

Best practices

• Selection mode को विकल्पों के अनुसार चुनें। एक-दूसरे को बाहर करने वाले विकल्पों, जैसे payment methods या shipping speeds, के लिए single selection रखें, और जब merchants एक से ज़्यादा चुन सकें तो multiple सेट करें।
• Choice labels से नतीजा साफ़ हो। "Email notifications for new orders" सिर्फ़ "Email" से ज़्यादा बताता है। Labels छोटे रखें, लेकिन इतने साफ़ कि अपने आप में समझ आ जाएँ।
• label को सवाल या कथन के रूप में लिखें। "Which shipping method?" या "Select notification preferences" जैसा title merchants को "Options" या "Settings" जैसे अस्पष्ट शब्द से ज़्यादा बताता है।
• जटिल विकल्पों को details slot में समझाएँ। जब merchants को यह समझना ज़रूरी हो कि किसी विकल्प को चुनने का क्या मतलब है, तो उस SChoice में details जोड़ें।
• error संदेश स्पष्ट रखें। सामान्य "Required field" के बजाय merchants को ठीक-ठीक बताएँ कि क्या छूट गया है, जैसे "Select at least one notification preference"।

<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 की best practices (अंग्रेज़ी में) देखें।

उदाहरण

EmailSMSPush notification

Selected: (none)

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

<SChoiceList v-model="value" />

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

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

Props

Prop	Type	विवरण
details	any	field के लिए संदर्भ या मार्गदर्शन देने वाला अतिरिक्त text। user को अधिक जानकारी या निर्देश देने के लिए यह text field और उसके label के साथ दिखाया जाता है। यह screen reader users को भी उपलब्ध कराया जाएगा।
disabled	boolean	क्या field disabled है, जिससे कोई भी उपयोगकर्ता interaction नहीं हो पाता। true होने पर, किसी भी child choice की disabled property अनदेखी कर दी जाती है।
error	any	user को error बताएँ। field को एक विशेष style दिया जाएगा, ताकि ऐसी समस्याएँ बताई जा सकें जिन्हें तुरंत हल करना ज़रूरी है।
label	any	field label के रूप में उपयोग होने वाला content।
labelAccessibilityVisibility	"visible" | "exclusive"	component के label की visibility बदलता है। - visible: label सभी users को दिखाई देता है। - exclusive: label दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
multiple	boolean	क्या एक से अधिक विकल्प चुने जा सकते हैं।
name	string	field के लिए identifier, जो सबसे नज़दीकी containing form के भीतर unique हो।
values	string[]	चुने गए options की values का array। यह child options पर selected prop सेट करने के लिए एक सुविधाजनक prop है।

Events

Event	Type
change	Event
input	Event

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

Slots

Slot	विवरण
default	वे choices जिनमें से user चुन सकता है। choice components स्वीकार करता है।