SLink <s-link>

एक text link जो किसी दूसरे पेज या URL पर ले जाता है, या कोई command चलाता है। SLink Shopify के Polaris <s-link> web component का typed Vue 3 wrapper है।

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

Best practices

• सिर्फ़ external links को नए tab में खोलें। Admin के बाहर के URLs, जैसे help docs या partner sites, के लिए target="_blank" सेट करें। Admin के अंदर के links उसी tab में खुलने चाहिए, ताकि merchants workflow में अपनी जगह न खोएँ।

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

उदाहरण

Neutral linkCritical link

<script setup>
import { SLink } from 'polaris-vue-elements'
</script>

<template>
  <SLink href="https://polaris.shopify.com" target="_blank">Neutral link</SLink>
  <SLink href="https://polaris.shopify.com" target="_blank" tone="critical">Critical link</SLink>
</template>

Props

Prop	Type	विवरण
accessibilityLabel	string	screen readers जैसी assistive technologies के लिए component का उद्देश्य या content बताने वाला label। जब केवल दिखाई देने वाला content component का उद्देश्य स्पष्ट रूप से न बताए, तब अतिरिक्त संदर्भ देने के लिए इसका उपयोग करें।
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 देखें।
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 होगा।
interestFor	string	उस component की ID जिसे इस component पर interest (जैसे hover और focus) पर प्रतिक्रिया देनी चाहिए।
lang	string	text सामग्री की भाषा। इसका उपयोग तब करें जब text page के बाकी हिस्से से अलग भाषा में हो, ताकि screen readers जैसी assistive technologies सही उच्चारण का उपयोग कर सकें। मान IANA language subtag registry का एक मान्य language subtag होना चाहिए।
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	बताता है कि linked URL कहाँ दिखाया जाए।
tone	"auto" | "neutral" | "critical"	component का semantic अर्थ और color treatment। - critical: तत्काल समस्याएँ या destructive actions। - auto: context के आधार पर अपने आप तय होता है। - neutral: बिना किसी विशेष उद्देश्य की सामान्य जानकारी।

Events

Event	Type
click	MouseEvent

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

Slots

Slot	विवरण
default	link component के अंदर दिखाई जाने वाले text या elements, जो activate होने पर उपयोगकर्ताओं को किसी दूसरी जगह ले जाता है।