SColorPicker <s-color-picker>

Color चुनने के लिए एक visual control। SColorPicker Shopify के Polaris <s-color-picker> web component का typed Vue 3 wrapper है।

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

Best practices

• मौजूदा color से शुरू करें। जब merchants किसी मौजूदा color को edit करें, तो value को उसी पर सेट करें, ताकि वे भटकें नहीं और देख सकें कि वे किस color से बदलाव कर रहे हैं।
• Color को संदर्भ में preview करें। जहाँ संभव हो, picker के पास चुने गए color को उस चीज़ पर लागू करके दिखाएँ जिस पर उसका असर पड़ता है, जैसे कोई button।
• सटीक values के लिए इसे SColorField के साथ इस्तेमाल करें। Picker देखकर चुनने के लिए अच्छा है, जबकि color field merchants को सटीक hex value टाइप करने देता है।

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

उदाहरण

Value: #008060

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

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

<template>
  <SColorPicker v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

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

<SColorPicker v-model="value" />

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

<SColorPicker :value="value" @input="value = $event.target.value" />

Props

Prop	Type	विवरण
alpha	boolean	क्या color picker में alpha (transparency) channel चयन सक्षम करना है, जिससे उपयोगकर्ता अर्ध-पारदर्शी colors चुन सकें।
defaultValue	string	field के पहली बार load होने पर प्रारंभिक color मान। placeholder के विपरीत, यह एक वास्तविक मान है जिसे उपयोगकर्ता edit कर सकता है और जो form के साथ submit होता है। उपयोगकर्ता के interact करना शुरू करते ही उसका input इसकी जगह ले लेता है। field load होने के बाद इस property को बदलने का कोई असर नहीं होता। किसी भी समय field का मान अपडेट करने के लिए इसके बजाय value का उपयोग करें।
id	string	element के लिए एक unique identifier।
name	string	field के लिए identifier, जो सबसे नज़दीकी containing form के भीतर unique हो।
value	string	वर्तमान में चुना गया color मान। कई input formats स्वीकार करता है: - Hex: #RGB, #RRGGBB, #RRGGBBAA (3, 6 या 8 अंक) - RGB/RGBA: rgb(255, 0, 0) या rgb(255 0 0) (comma या space से अलग किए गए) - HSL/HSLA: hsl(0, 100%, 50%) या hsl(0 100% 50%) मान अमान्य होने पर खाली string लौटाता है। change event हमेशा hex format में मान emit करता है।

Events

Event	Type
change	Event
input	Event

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