SBanner <s-banner>

एक प्रमुख संदेश जो पेज या section के ऊपर ज़रूरी जानकारी, चेतावनियाँ या errors दिखाता है। SBanner Shopify के Polaris <s-banner> web component का typed Vue 3 wrapper है।

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

Best practices

• हर banner में एक ही बात रखें। हर banner में एक ही संदेश या एक ही ज़रूरी कार्रवाई होनी चाहिए, ताकि merchants यह सोचते न रह जाएँ कि यह किस बारे में है।
• जल्दी पढ़े जाने लायक लिखें। Text इतना छोटा रखें कि merchants एक नज़र में संदेश और अगला कदम समझ सकें।
• Merchants को अगला कदम बताएँ। tone="info", tone="warning" या tone="critical" वाले banners में एक call to action होना चाहिए जो साफ़-साफ़ बताए कि आगे क्या करना है।
• Merchants को banners बंद करने दें। जब तक संदेश पर तुरंत कार्रवाई ज़रूरी न हो, dismissible सेट करें, और ऐसे banners से बचें जो बंद करने के किसी तरीके के बिना स्क्रीन पर बने रहते हैं।
• Banners को उनके दायरे के अनुसार रखें। पूरे पेज से जुड़े संदेश के लिए banner को किसी भी section के बाहर रखें, और जब वह किसी section के content से जुड़ा हो तो उसे उसी section के अंदर रखें।

<SBanner heading="Shipping rates need updating" tone="warning" dismissible>
  Some of your shipping zones have no rates, so customers there can't check out.
  <template #secondary-actions>
    <SButton variant="secondary">Review shipping zones</SButton>
  </template>
</SBanner>

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

उदाहरण

Your changes have been saved.We couldn't process the payment. Please try again.Retry

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

const showCritical = ref(true)
</script>

<template>
  <!-- SBanner needs default-slot content — a `heading` alone renders an empty
       banner. See docs/guide/quirks.md. -->
  <SBanner heading="Order updated" tone="success">
    <SText>Your changes have been saved.</SText>
  </SBanner>

  <!-- dismissible banners fire `dismiss` immediately, then `afterhide` once any
       animation completes; drive `hidden` (or v-if, as here) from that event. -->
  <SBanner
    v-if="showCritical"
    heading="Something went wrong"
    tone="critical"
    dismissible
    @dismiss="showCritical = false"
  >
    <SText>We couldn't process the payment. Please try again.</SText>
    <template #secondary-actions>
      <SButton variant="secondary">Retry</SButton>
    </template>
  </SBanner>
</template>

Props

Prop	Type	विवरण
dismissible	boolean	क्या banner एक close button दिखाता है जिससे उपयोगकर्ता उसे dismiss कर सकें। close button दबाने पर dismiss event fire होता है, फिर hidden को true पर सेट किया जाता है, कोई भी animation पूरा होता है, और afterhide event fire होता है।
heading	string	banner के ऊपर दिखाई जाने वाला heading text।
hidden	boolean	नियंत्रित करता है कि banner दिखाई दे या छिपा रहे। controlled component pattern इस्तेमाल करते समय, अगर banner dismissible है, तो dismiss event fire होने पर इस property को true पर update करें। आप इसे true पर सेट करके banner को programmatically छिपा सकते हैं, भले ही वह dismissible न हो।
tone	"auto" | "info" | "success" | "warning" | "critical"	component का semantic अर्थ और color treatment। - info: जानकारी देने वाली सामग्री या उपयोगी सुझाव। - success: सकारात्मक परिणाम या सफल states। - warning: संभावित समस्याओं के बारे में महत्वपूर्ण चेतावनियाँ। - critical: तत्काल समस्याएँ या destructive actions। - auto: context के आधार पर अपने आप तय होता है।

Events

Event	Type
afterhide	CustomEvent
dismiss	CustomEvent

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

Slots

Slot	विवरण
default	banner component के अंदर दिखाई जाने वाला मुख्य संदेश, जो उपयोगकर्ताओं को महत्वपूर्ण जानकारी या मार्गदर्शन देता है।
secondary-actions	banner के नीचे दिखाए जाने वाले action buttons, जिनसे users message का जवाब दे सकते हैं। variant="secondary" या variant="auto" वाले अधिकतम दो button components स्वीकार करता है।