SClickable `<s-clickable>`

Button की styling थोपे बिना किसी भी content को button या link की तरह clickable बनाता है। SClickable Shopify के Polaris <s-clickable> web component का typed Vue 3 wrapper है।

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

Best practices

बिना दिखने वाले text के elements को label दें। अगर clickable area के अंदर कोई पढ़ने लायक text नहीं है, तो accessibilityLabel सेट करें ताकि screen reader users जानें कि यह किसलिए है।
सही mode चुनें। Actions ट्रिगर करने के लिए इसे button की तरह इस्तेमाल करें, navigate करने के लिए इसे href दें, और जब यह form submit करे तो type="submit" सेट करें।
Disabled states को समझाएँ। जब आप disabled सेट करें, तो state को दृश्य रूप से साफ़ रखें और ऐसा text जोड़ें जो merchants को बताए कि element का इस्तेमाल क्यों नहीं हो सकता।

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

उदाहरण

Clicked 0 times

vue

<script setup>
import { ref } from 'vue'
import { SClickable, SText } from 'polaris-vue-elements'

const clicks = ref(0)
</script>

<template>
  <!-- SClickable is a generic, unstyled-by-default interactive container: box
       styling props (background, padding, borderRadius, ...) plus a click event. -->
  <SClickable
    background="subdued"
    borderRadius="200"
    padding="base"
    @click="clicks++"
  >
    <SText>Clicked {{ clicks }} times</SText>
  </SClickable>
</template>

Props

Prop	Type	विवरण
`accessibilityLabel`	`string`	element का उद्देश्य या content बताने वाला label। सेट होने पर, assistive technologies इस्तेमाल करने वाले users को इसकी घोषणा की जाएगी और उन्हें अधिक संदर्भ मिलेगा। इसका उपयोग केवल तब करें जब element का content assistive technologies इस्तेमाल करने वाले users के लिए पर्याप्त संदर्भ न दे।
`accessibilityRole`	`"generic" \| "status" \| "main" \| "header" \| "footer" \| "section" \| "region" \| "aside" … (9 more)`	component के content का semantic अर्थ सेट करता है। सेट होने पर, assistive technologies page पर navigate करने में users की मदद के लिए इस role का उपयोग करेंगी।
`accessibilityVisibility`	`"visible" \| "hidden" \| "exclusive"`	element की visibility बदलता है। - `visible`: element सभी users को दिखाई देता है। - `hidden`: element accessibility tree से हटा दिया जाता है लेकिन दिखाई देता रहता है। - `exclusive`: element दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
`background`	`"subdued" \| "base" \| "strong" \| "transparent"`	component का background color।
`blockSize`	`"auto" \| "0"`	सामान्य layouts में element का vertical आकार (left-to-right या right-to-left writing modes में ऊँचाई)। block size लिखने की दिशा के अनुसार बदलता है: horizontal layouts में यह ऊँचाई को और vertical layouts में चौड़ाई को नियंत्रित करता है। इससे अलग-अलग text दिशाओं में एक जैसा व्यवहार सुनिश्चित होता है। block-size के बारे में और जानें।
`border`	`BorderShorthand`	shorthand syntax से लगाई गई border, जो एक ही property में width, color और style तय करती है।
`borderColor`	`"subdued" \| "base" \| "strong"`	design system के color scale का उपयोग करके border का color। सेट होने पर, यह `border` property में दी गई color value को override करता है। आवश्यक visual ज़ोर के अनुसार `subdued`, `base` या `strong` में से चुनें।
`borderRadius`	`MaybeAllValuesShorthandProperty<BoxBorderRadii>`	design system के radius scale का उपयोग करते हुए element के कोनों की गोलाई। हर कोने के लिए अलग radius तय करने हेतु 1 से 4 मानों वाले syntax का समर्थन करता है। गोल कोने या पूरी तरह गोल elements बनाने के लिए इसका उपयोग करें।
`borderStyle`	`"" \| MaybeAllValuesShorthandProperty<BoxBorderStyles>`	सभी ओर border की visual style, जैसे solid, dashed या dotted। सेट करने पर, यह `border` property में दिए गए style मान को override करता है। हर ओर के लिए अलग style तय करने हेतु 1 से 4 मानों वाले syntax का समर्थन करता है।
`borderWidth`	`"" \| MaybeAllValuesShorthandProperty<"base" \| "small-100" \| "small" \| "large" \| "large-100" \| "none">`	सभी ओर border की मोटाई। सेट करने पर, यह `border` property में दिए गए width मान को override करता है। हर ओर के लिए अलग width तय करने हेतु 1 से 4 मानों वाले syntax का समर्थन करता है।
`command`	`"--auto" \| "--show" \| "--hide" \| "--toggle" \| "--copy"`	यह सेट करता है कि इस clickable के activate होने पर `commandFor` कौन-सा action ले। हर component कौन-से actions सपोर्ट करता है, यह जानने के लिए उसका documentation देखें। - `--auto`: target component के लिए एक default action। - `--show`: target component दिखाता है। - `--hide`: target component छिपाता है। - `--toggle`: target component toggle करता है। - `--copy`: target ClipboardItem copy करता है।
`commandFor`	`string`	उस component की ID जिसे इस component पर activations (जैसे clicks) पर प्रतिक्रिया देनी चाहिए। target का behavior नियंत्रित करने के लिए `command` देखें।
`disabled`	`boolean`	क्या component disabled है, जिससे clicks और focus रुक जाते हैं। disabled होने पर `click` event fire नहीं होगा और child elements से आने वाले click events का propagation तुरंत रुक जाता है। interactive child elements अब भी focus पा सकते हैं और उनसे interact किया जा सकता है। यह डिफ़ॉल्ट रूप से कोई visual styling लागू नहीं करता। ज़रूरत के अनुसार disabled styling आपको स्वयं लागू करनी चाहिए।
`display`	`"auto" \| "none"`	component का बाहरी display type। बाहरी type तय करता है कि component flow layout में कैसे भाग लेता है। - `auto` component का प्रारंभिक मान। वास्तविक मान component और context पर निर्भर करता है। - `none` component को display से छिपा देता है और उसे accessibility tree से हटा देता है, जिससे वह screen readers के लिए अदृश्य हो जाता है।
`download`	`string`	browser linked URL को download की तरह मानता है, और string file का नाम होती है। download केवल same-origin URLs या `blob:` और `data:` schemes के लिए काम करता है।
`href`	`string`	link किया जाने वाला URL। - अगर सेट है, तो `click` event चलने के बाद यह `href` में बताई गई location पर navigate करेगा। - अगर `commandFor` सेट है, तो navigation के बजाय `command` execute होगा।
`inlineSize`	`"auto" \| "0"`	horizontal writing modes में चौड़ाई, या vertical writing modes में ऊँचाई। text की दिशा के अनुसार ढलने वाले flow-relative sizing के लिए इसका उपयोग करें। inline-size के बारे में और जानें।
`interestFor`	`string`	उस component की ID जिसे इस component पर interest (जैसे hover और focus) पर प्रतिक्रिया देनी चाहिए।
`lang`	`string`	text सामग्री की भाषा। इसका उपयोग तब करें जब text page के बाकी हिस्से से अलग भाषा में हो, ताकि screen readers जैसी assistive technologies सही उच्चारण का उपयोग कर सकें। मान IANA language subtag registry का एक मान्य language subtag होना चाहिए।
`loading`	`boolean`	क्या component loading state में है, जो assistive technology को बताता है कि कोई action प्रगति पर है और interaction को रोकता है।
`maxBlockSize`	`"none" \| "0"`	horizontal writing modes में अधिकतम ऊँचाई, या vertical writing modes में अधिकतम चौड़ाई। element को इस आकार से बड़ा होने से रोकता है। max-block-size के बारे में और जानें।
`maxInlineSize`	`"none" \| "0"`	horizontal writing modes में अधिकतम चौड़ाई, या vertical writing modes में अधिकतम ऊँचाई। element को इस आकार से बड़ा होने से रोकता है। max-inline-size के बारे में और जानें।
`minBlockSize`	`"0"`	horizontal writing modes में न्यूनतम ऊँचाई, या vertical writing modes में न्यूनतम चौड़ाई। element को इस आकार से छोटा होने से रोकता है। min-block-size के बारे में और जानें।
`minInlineSize`	`"0"`	horizontal writing modes में न्यूनतम चौड़ाई, या vertical writing modes में न्यूनतम ऊँचाई। element को इस आकार से छोटा होने से रोकता है। min-inline-size के बारे में और जानें।
`overflow`	`"visible" \| "hidden"`	element का overflow behavior सेट करता है। - `hidden`: content के element के container से बड़ा होने पर उसे clip कर देता है। element scroll नहीं होगा और users drag करके या mouse के scroll wheel से clip हुआ content नहीं देख पाएँगे। - `visible`: element के container से बाहर जाने वाला content दिखाई देता है।
`padding`	`MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>`	component के सभी किनारों पर लागू padding। flow-relative मानों के साथ 1 से 4 मानों वाले syntax का समर्थन करता है: - 1 मान सभी ओर लागू होता है - 2 मान block (ऊपर/नीचे) और inline (बाएँ/दाएँ) पर लागू होते हैं - 3 मान block-start (ऊपर), inline (बाएँ/दाएँ) और block-end (नीचे) पर लागू होते हैं - 4 मान block-start (ऊपर), inline-end (दाएँ), block-end (नीचे) और inline-start (बाएँ) पर लागू होते हैं उदाहरण:* `base`, `large none`, `base large-100 base small` हटाई गई padding वाले निकटतम container से padding inherit करने के लिए `auto` का उपयोग करें। एक responsive value string भी स्वीकार करता है, जिसमें समर्थित `PaddingKeyword` query value के रूप में हो।
`paddingBlock`	`MaybeResponsive<"" \| MaybeTwoValuesShorthandProperty<PaddingKeyword>>`	block-direction padding (horizontal writing modes में ऊपर और नीचे)। दोनों ओर के लिए एक value, या block-start और block-end के लिए space से अलग की गई दो values स्वीकार करता है। उदाहरण:* `large none` ऊपर `large` और नीचे `none` लागू करता है। `padding` की block value को override करता है। query value के रूप में समर्थित `PaddingKeyword` वाली responsive value string भी स्वीकार करता है।
`paddingBlockEnd`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	block-end padding (horizontal writing modes में नीचे)। `paddingBlock` की block-end value को override करता है। query value के रूप में समर्थित `PaddingKeyword` वाली responsive value string भी स्वीकार करता है।
`paddingBlockStart`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	block-start padding (horizontal writing modes में ऊपर)। `paddingBlock` की block-start value को override करता है। query value के रूप में समर्थित `PaddingKeyword` वाली responsive value string भी स्वीकार करता है।
`paddingInline`	`MaybeResponsive<"" \| MaybeTwoValuesShorthandProperty<PaddingKeyword>>`	inline दिशा की padding (horizontal writing modes में बाएँ और दाएँ)। दोनों ओर के लिए एक मान, या inline-start और inline-end के लिए space से अलग किए गए दो मान स्वीकार करता है। उदाहरण:* `large none` बाईं ओर `large` और दाईं ओर `none` लागू करता है। `padding` से आए inline मान को override करता है। एक responsive value string भी स्वीकार करता है, जिसमें समर्थित `PaddingKeyword` query value के रूप में हो।
`paddingInlineEnd`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	inline-end padding (LTR writing modes में दाईं ओर, RTL में बाईं ओर)। `paddingInline` से आए inline-end मान को override करता है। एक responsive value string भी स्वीकार करता है, जिसमें समर्थित `PaddingKeyword` query value के रूप में हो।
`paddingInlineStart`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	inline-start padding (LTR writing modes में बाईं ओर, RTL में दाईं ओर)। `paddingInline` से आए inline-start मान को override करता है। एक responsive value string भी स्वीकार करता है, जिसमें समर्थित `PaddingKeyword` query value के रूप में हो।
`target`	`"auto" \| "_blank" \| "_self" \| "_parent" \| "_top"`	बताता है कि linked URL कहाँ दिखाया जाए।
`type`	`"button" \| "reset" \| "submit"`	Button का behavior। - `submit`: बताता है कि component submit button की तरह काम करता है, यानी यह सबसे नज़दीकी form को submit करता है। - `button`: बताता है कि component एक button की तरह काम करता है, यानी इसका कोई default action नहीं है। - `reset`: बताता है कि component reset button की तरह काम करता है, यानी यह सबसे नज़दीकी form को reset करता है (fields को उनकी default values पर लौटाता है)। अगर component `href` या `commandFor`/`command` सपोर्ट करता है और उनमें से कोई सेट है, तो इस property को नज़रअंदाज़ किया जाता है।

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

Events

Event	Type
`blur`	`FocusEvent`
`click`	`MouseEvent`
`focus`	`FocusEvent`

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

Slots

Slot	विवरण
`default`	clickable component के भीतर दिखाया जाने वाला content, जो किसी भी content को button या link के semantic अर्थ के बिना interactive और clickable बनाता है।

SClickable <s-clickable> ​

Best practices ​

उदाहरण ​

Props ​

Events ​

Slots ​