SEmptyState <s-empty-state>

बताता है कि किसी view में अभी तक content क्यों नहीं है और merchants को पहला कदम उठाने की दिशा दिखाता है। SEmptyState Shopify के Polaris <s-empty-state> web component का typed Vue 3 wrapper है।

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

Best practices

• पहले कारण बताएँ, फिर समाधान। सिर्फ़ "No products" वाला heading merchants को अंदाज़ा लगाने पर छोड़ देता है। heading में बताएँ कि वहाँ कुछ क्यों नहीं है, और action को अगला कदम बताने दें।
• एक primary action से शुरुआत करें। उस एक कदम के लिए primary-action slot इस्तेमाल करें जो merchants को empty state से बाहर ले जाए, और बाकी विकल्प secondary-actions में रखें।
• Filter किए गए नतीजों के लिए अलग शब्द चुनें। ऐसा resource जिसमें कुछ भी नहीं है और ऐसा filter जिससे कुछ भी मेल नहीं खाया, ये दो अलग स्थितियाँ हैं। Filter किए गए नतीजों के लिए merchants को बताएँ कि filter कैसे बदलें।
• Graphic को अतिरिक्त मानें। असली काम heading और action करते हैं, इसलिए घने layouts में graphic slot खाली छोड़ दें, और जब इसका इस्तेमाल करें तो इसे एक icon या image तक सीमित रखें।

<SEmptyState heading="You haven't added any products yet">
  <template #primary-action>
    <SButton variant="primary">Add product</SButton>
  </template>
  <template #secondary-actions>
    <SButton>Import products</SButton>
  </template>
</SEmptyState>

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

उदाहरण

Once a customer places an order, it will show up here. Learn more about ordersCreate orderImport orders

<script setup>
import { SEmptyState, SButton, SIcon, SText, SLink } from 'polaris-vue-elements'
</script>

<template>
  <SEmptyState heading="No orders yet">
    <template #graphic>
      <SIcon type="cart" size="large" />
    </template>
    <template #subheading>
      <SText>Once a customer places an order, it will show up here. <SLink href="https://help.shopify.com/orders" target="_blank">Learn more about orders</SLink></SText>
    </template>
    <template #primary-action>
      <SButton variant="primary">Create order</SButton>
    </template>
    <template #secondary-actions>
      <SButton variant="secondary">Import orders</SButton>
    </template>
  </SEmptyState>
</template>

Props

Prop	Type	विवरण
heading	string	EmptyState की heading।

Slots

Slot	विवरण
graphic	heading के ऊपर दिखाया जाने वाला illustration या symbol। एक अकेला Image या Icon स्वीकार करता है, सीधे या किसी wrapping element के एकमात्र child के रूप में।
primary-action	मुख्य call to action, जो text सामग्री के नीचे render होता है। एक Button स्वीकार करता है जिसका variant primary हो; इसके अलावा कुछ भी development warning के साथ अनदेखा कर दिया जाता है।
secondary-actions	एक वैकल्पिक action, जो primary action के बगल में render होता है। secondary या auto variant वाला एक अकेला Button स्वीकार करता है — नाम बहुवचन होने के बावजूद, केवल एक ही render होता है।
subheading	heading के नीचे सहायक text, जो बताता है कि क्या कमी है या आगे क्या करना है। Text और Link components स्वीकार करता है।