SChip <s-chip>

किसी tag या attribute के लिए एक static label, जिसे चाहें तो हटाया जा सकता है। SChip Shopify के Polaris <s-chip> web component का typed Vue 3 wrapper है।

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

Best practices

• Chips का इस्तेमाल वर्णन के लिए करें, कार्रवाई के लिए नहीं। Chips उन tags, statuses और categories के लिए अच्छे हैं जो merchants को content के बारे में कुछ बताते हैं। ये buttons नहीं हैं, इसलिए जब किसी chip पर click करना या उसे हटाना हो, तो इसके बजाय SClickableChip इस्तेमाल करें।
• Labels छोटे रखें। "Featured" या "On sale" जैसा छोटा text एक नज़र में पढ़ा जा सकता है, जबकि लंबे labels स्कैनिंग को धीमा करते हैं और कट भी सकते हैं।
• Visual weight को content से मिलाएँ। द्वितीयक metadata के लिए color="subdued" और सामान्य tags व categories के लिए default color इस्तेमाल करें।
• Chips को उसी के पास रखें जिसका वे वर्णन करते हैं। उन्हें उस item के बगल में रखें जिसे वे label करते हैं, और लिस्ट में हर row पर उन्हें एक ही जगह रखें ताकि merchants जल्दी स्कैन कर सकें।
• जब मदद मिले तो icon जोड़ें। graphic slot में एक SIcon किसी status या जानी-पहचानी category को पहचानना आसान बना सकता है।

<SChip>
  <SIcon slot="graphic" type="star" />
  Featured
</SChip>
<SChip color="subdued">Imported</SChip>

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

उदाहरण

Snowboard Removable chip

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

const removed = ref(false)
</script>

<template>
  <!-- SChip's `graphic` slot only accepts an SIcon. -->
  <SChip>
    <template #graphic>
      <SIcon type="product" />
    </template>
    Snowboard
  </SChip>

  <!-- SChip has no `hidden` prop (unlike SClickableChip) — use v-if to remove it
       from the DOM when `remove` fires. -->
  <SChip v-if="!removed" color="strong" removable @remove="removed = true">
    Removable chip
  </SChip>
</template>

Props

Prop	Type	विवरण
accessibilityLabel	string	screen readers जैसी assistive technologies के लिए component का उद्देश्य या content बताने वाला label। जब केवल दिखाई देने वाला content component का उद्देश्य स्पष्ट रूप से न बताए, तब अतिरिक्त संदर्भ देने के लिए इसका उपयोग करें।
color	"subdued" | "base" | "strong"	color emphasis level, जो visual intensity नियंत्रित करता है।
removable	boolean	क्या chip हटाया जा सकता है।

Events

Event	Type
remove	CustomEvent

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

Slots

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