SClickableChip <s-clickable-chip>

एक interactive chip जिसे click किया जा सकता है, link की तरह खोला जा सकता है या हटाया जा सकता है — filters और लगाए गए tags के लिए उपयोगी। SClickableChip Shopify के Polaris <s-clickable-chip> web component का typed Vue 3 wrapper है।

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

Best practices

• Labels छोटे रखें। लक्ष्य एक से तीन शब्द है, जैसे "Electronics" या "Summer sale"।
• color को महत्व के अनुसार चुनें। द्वितीयक chips के लिए color="subdued" इस्तेमाल करें और सामान्य selections के लिए default "base" रहने दें।
• हटाने का विकल्प आसानी से दिखे। जब कोई chip removable हो, तो जाँच लें कि उसका remove button दिख रहा है और उसकी hover और focus states साफ़ हैं।
• संबंधित chips को समूह में रखें। उन्हें inline SStack में रखें ताकि वे समान spacing के साथ क्षैतिज रूप से एक कतार में दिखें।

<SStack direction="inline" gap="small-200">
  <SClickableChip>Electronics</SClickableChip>
  <SClickableChip color="subdued" removable>Summer sale</SClickableChip>
</SStack>

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

उदाहरण

Visit Polaris Removable chip

<script setup>
import { ref } from 'vue'
import { SClickableChip, SIcon } from 'polaris-vue-elements'

const removed = ref(false)
</script>

<template>
  <!-- SClickableChip is a Chip that can act as a link (href) or command trigger,
       and its `graphic` slot only accepts an SIcon. -->
  <SClickableChip href="https://polaris.shopify.com" target="_blank">
    <template #graphic>
      <SIcon type="external" />
    </template>
    Visit Polaris
  </SClickableChip>

  <!-- removable chips fire `remove`; drive `hidden` from app state to actually hide it. -->
  <SClickableChip removable :hidden="removed" @remove="removed = true">
    Removable chip
  </SClickableChip>
</template>

Props

Prop	Type	विवरण
accessibilityLabel	string	Chip का उद्देश्य या content बताने वाला label। screen readers जैसी assistive technologies इस्तेमाल करने वाले users को यह पढ़कर सुनाया जाएगा।
color	"subdued" | "base" | "strong"	color को अधिक या कम तीव्र बनाएँ।
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	क्या chip disabled है, जिससे कोई भी उपयोगकर्ता interaction नहीं हो पाता।
hidden	boolean	क्या chip दृश्य से छिपा हुआ है। removable chips के साथ controlled component pattern का उपयोग करते समय, remove event fire होने पर इस property को अपडेट करें। जो chips हटाए नहीं जा सकते, उनके लिए chip को दिखाने या छिपाने हेतु इस property को manually toggle करें।
href	string	click होने पर navigate करने के लिए URL। पहले click event fire होता है, फिर navigation होता है। अगर commandFor भी सेट है, तो navigation के बजाय command execute होता है।
interestFor	string	उस component की ID जिसे इस component पर interest (जैसे hover और focus) पर प्रतिक्रिया देनी चाहिए।
removable	boolean	क्या chip हटाने के लिए एक remove button दिखाता है। click करने पर remove callback fire होता है।

Events

Event	Type
afterhide	CustomEvent
click	MouseEvent
remove	CustomEvent

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

Slots

Slot	विवरण
default	chip के अंदर दिखाई जाने वाला text label, जो एक interactive filter, tag या चुनने योग्य item को दर्शाता है।
graphic	chip की शुरुआत में दिखाने के लिए एक वैकल्पिक icon। केवल icon components स्वीकार करता है।