SSelect <s-select>

किसी सूची में से एक विकल्प चुनने के लिए एक dropdown। SSelect Shopify के Polaris <s-select> web component का typed Vue 3 wrapper है।

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

Best practices

• इसका उपयोग विकल्पों के ज्ञात समूह के लिए करें। Select तब काम करता है जब merchants किसी पूर्वनिर्धारित list में से चुनते हैं। जब merchants को कोई custom value दर्ज करनी हो या लंबी list में खोजना हो, तो ऐसा text field जो टाइप करते समय मेल खाते विकल्प सुझाए, या खोजने योग्य dropdown, बेहतर विकल्प है।
• विकल्पों को सोच-समझकर क्रम दें। संबंधित विकल्पों को समूह में रखें, सबसे आम विकल्पों को पहले रखें, या जब कोई स्वाभाविक क्रम न हो तो वर्णानुक्रम में लगाएँ, ताकि merchants अपना विकल्प जल्दी ढूँढ सकें।
• ऐसे labels लिखें जिन्हें आसानी से scan किया जा सके। हर विकल्प को पर्याप्त context दें ताकि merchants कई विकल्पों को खोलकर पढ़े बिना उनमें अंतर कर सकें।
• शुरुआती स्थिति जान-बूझकर चुनें। जब कोई स्पष्ट default हो तो एक विकल्प पहले से चुन लें, और जब merchants को सोच-समझकर चुनाव करना चाहिए तो placeholder का उपयोग करें। शुरुआती स्थिति को अस्पष्ट न छोड़ें।
• Validation की समस्याएँ समझाएँ। जब कोई चयन आवश्यक या अमान्य हो, तो error से merchants को विशेष रूप से बताएँ कि क्या करना है, क्योंकि अनुकूलित संदेश सामान्य संदेशों की तुलना में forms जल्दी पूरा करने में मदद करते हैं।

<SSelect label="Shipping speed" placeholder="Choose a shipping speed" required>
  <SOption value="standard">Standard (5–7 business days)</SOption>
  <SOption value="express">Express (2–3 business days)</SOption>
  <SOption value="overnight">Overnight (next business day)</SOption>
</SSelect>

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

उदाहरण

United StatesCanadaFranceGermany

Value: (none)

<script setup>
import { ref } from 'vue'
import { SSelect, SOption, SOptionGroup } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SSelect label="Shipping region" placeholder="Select a region" v-model="value">
    <SOptionGroup label="North America">
      <SOption value="us">United States</SOption>
      <SOption value="ca">Canada</SOption>
    </SOptionGroup>
    <SOptionGroup label="Europe">
      <SOption value="fr">France</SOption>
      <SOption value="de">Germany</SOption>
    </SOptionGroup>
  </SSelect>
  <p>Value: {{ value }}</p>
</template>

v-model

<SSelect> पर v-model value property से bind होता है और change DOM event को सुनता है।

<SSelect v-model="value" />

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

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

Props

Prop	Type	विवरण
details	any	field के लिए संदर्भ या मार्गदर्शन देने वाला अतिरिक्त text। user को अधिक जानकारी या निर्देश देने के लिए यह text field और उसके label के साथ दिखाया जाता है। यह screen reader users को भी उपलब्ध कराया जाएगा।
disabled	boolean	field को disable करता है, जिससे कोई भी interaction संभव नहीं रहता।
error	any	user को error बताएँ। field को एक विशेष style दिया जाएगा, ताकि ऐसी समस्याएँ बताई जा सकें जिन्हें तुरंत हल करना ज़रूरी है।
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	field में दिखाए जाने वाले icon का type।
id	string	element के लिए एक unique identifier।
label	any	field label के रूप में उपयोग होने वाला content।
labelAccessibilityVisibility	"visible" | "exclusive"	component के label की visibility बदलता है। - visible: label सभी users को दिखाई देता है। - exclusive: label दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
name	string	field के लिए identifier, जो सबसे नज़दीकी containing form के भीतर unique हो।
placeholder	string	एक छोटा संकेत जो field की अपेक्षित value बताता है।
required	boolean	क्या field के लिए कोई मान ज़रूरी है। यह आवश्यकता field में semantic अर्थ जोड़ती है, लेकिन इससे अपने आप कोई error नहीं दिखेगा। यदि आप चाहते हैं कि यह field खाली होने पर error दिखे, तो आप error property के साथ ऐसा कर सकते हैं।
value	string

पढ़ने में आसानी के लिए ऊपर के कुछ type columns छोटे किए गए हैं; पूरा union library के generate किए गए TypeScript types (src/lib/generated/types.ts) में उपलब्ध है।

Events

Event	Type
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

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

Slots

Slot	विवरण
default	dropdown list में दिखाए जाने वाले चुनने योग्य options। अलग-अलग चुनने योग्य items के लिए option components, और संबंधित options को labels के साथ तार्किक groups में व्यवस्थित करने के लिए option group components स्वीकार करता है।
details
error