SPasswordField <s-password-field>

Passwords के लिए एक text input जो टाइप किए गए अक्षरों को छिपाता है। SPasswordField Shopify के Polaris <s-password-field> web component का typed Vue 3 wrapper है।

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

Best practices

• Password managers के साथ काम करें। new-password या current-password जैसी उपयुक्त autocomplete value सेट करें, ताकि password managers merchants को मज़बूत passwords बनाने और सहेजने में मदद कर सकें।
• नियम पहले ही बता दें। Merchants के टाइप करना शुरू करने से पहले हर password आवश्यकता की सूची दें, बजाय इसके कि उन्हें केवल गलत entry के बाद दिखाया जाए। इससे झुंझलाहट और अधूरे छोड़े गए forms से बचा जा सकता है।
• Password बनाते समय merchants का मार्गदर्शन करें। बिना context के केवल नियम लागू करने के बजाय password की मज़बूती पर तुरंत feedback दें और समझाएँ कि उसे और मज़बूत कैसे बनाया जा सकता है।
• Merchants को paste करने दें। Password managers और ऐसे ही tools paste करने पर निर्भर करते हैं, और इसे रोकने से merchants ऐसे कमज़ोर passwords की ओर जाते हैं जिन्हें वे याद से टाइप कर सकें।
• Client-side checks को केवल feedback मानें। Password की जाँच हमेशा अपने server पर करें, क्योंकि browser की सीमाओं को आसानी से bypass किया जा सकता है। Client-side validation जल्दी प्रतिक्रिया देने के लिए है, सुरक्षा देने के लिए नहीं।

<SPasswordField label="New password" autocomplete="new-password" details="Use at least 12 characters." />

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

उदाहरण

Length: 0

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

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

<template>
  <SPasswordField label="Password" placeholder="Enter your password" v-model="value" />
  <p>Length: {{ value.length }}</p>
</template>

v-model

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

<SPasswordField v-model="value" />

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

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

Props

Prop	Type	विवरण
autocomplete	"current-password" | "new-password" | "on" | "off" | "shipping current-password" | "shipping new-password" | "billing current-password" | "billing new-password"	field में अपेक्षित content का संकेत। जब इसे on (default) पर सेट किया जाता है, तो यह property बताती है कि field को autofill सपोर्ट करना चाहिए, लेकिन अपेक्षित content के बारे में आपके पास कोई और semantic जानकारी नहीं है। off पर सेट करके आप बताते हैं कि इस field में संवेदनशील जानकारी है, या ऐसा content है जो कभी save नहीं होता, जैसे one-time codes। इसके बजाय, आप ऐसी value भी दे सकते हैं जो बताए कि autofill के दौरान इस field में कौन-सा विशेष डेटा भरा जाना चाहिए।
defaultValue	string	field का डिफ़ॉल्ट मान।
details	any	field के लिए संदर्भ या मार्गदर्शन देने वाला अतिरिक्त text। user को अधिक जानकारी या निर्देश देने के लिए यह text field और उसके label के साथ दिखाया जाता है। यह screen reader users को भी उपलब्ध कराया जाएगा।
disabled	boolean	field को disable करता है, जिससे कोई भी interaction संभव नहीं रहता।
error	any	user को error बताएँ। field को एक विशेष style दिया जाएगा, ताकि ऐसी समस्याएँ बताई जा सकें जिन्हें तुरंत हल करना ज़रूरी है।
id	string	element के लिए एक unique identifier।
label	any	field label के रूप में उपयोग होने वाला content।
labelAccessibilityVisibility	"visible" | "exclusive"	component के label की visibility बदलता है। - visible: label सभी users को दिखाई देता है। - exclusive: label दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
maxLength	number	अनुमत characters की अधिकतम संख्या बताता है।
minLength	number	अनुमत characters की न्यूनतम संख्या बताता है।
name	string	field के लिए identifier, जो सबसे नज़दीकी containing form के भीतर unique हो।
placeholder	string	एक छोटा संकेत जो field की अपेक्षित value बताता है।
readOnly	boolean	उपयोगकर्ता field को edit नहीं कर सकता। यह focus हो सकता है और screen readers द्वारा announce किया जाएगा।
required	boolean	क्या field के लिए कोई मान ज़रूरी है। यह आवश्यकता field में semantic अर्थ जोड़ती है, लेकिन इससे अपने आप कोई error नहीं दिखेगा। यदि आप चाहते हैं कि यह field खाली होने पर error दिखे, तो आप error property के साथ ऐसा कर सकते हैं।
value	string	field का वर्तमान मान। छोड़ देने पर field खाली रहेगा।

Events

Event	Type
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

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

Slots

Slot	विवरण
details
error