SModal <s-modal>

केंद्रित tasks और confirmations के लिए एक dialog overlay, जो किसी command या method call से खुलता है। SModal Shopify के Polaris <s-modal> web component का typed Vue 3 wrapper है।

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

Best practices

• Modals को उन फ़ैसलों के लिए रखें जिनमें ध्यान चाहिए। Modal तब खोलें जब merchants को कोई खास चुनाव करना हो या किसी अहम बात को स्वीकार करना हो। अगर काम या tool सीधे पेज पर रह सकता है, तो उसे वहीं रखें।
• इनका इस्तेमाल कम करें। हर modal merchant के काम में रुकावट डालता है, इसलिए इसे default pattern के बजाय अहम पलों के लिए आखिरी उपाय मानें।
• मुख्य action को उभारें। Modal के primary-action slot में एक साफ़ और प्रमुख call to action दें।
• Actions को स्पष्ट क्रियाओं से label करें। "Delete", "Save" या "Continue" जैसे buttons merchants को बताते हैं कि क्या होगा; "Yes", "OK" या "Submit" जैसे सामान्य labels से बचें।
• Destructive actions के नतीजे साफ़ बताएँ। जब action कुछ delete या discard करता है, तो modal के body में बताएँ कि merchants क्या खो देंगे।
• Modals को nest न करें। पहले से खुले modal के अंदर से दूसरा modal खोलने से बचें।

<SModal id="delete-product" heading="Delete product?">
  <SParagraph>This permanently deletes the product and its variants. You can't undo this.</SParagraph>
  <SButton slot="primary-action" tone="critical">Delete product</SButton>
  <SButton slot="secondary-actions">Cancel</SButton>
</SModal>

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

उदाहरण

Open modal

Modal body content goes here.

SaveCancel

<script setup>
import { SButton, SModal } from 'polaris-vue-elements'
</script>

<template>
  <SButton commandFor="example-modal" command="--show">Open modal</SButton>

  <SModal id="example-modal" heading="Example modal">
    <p>Modal body content goes here.</p>

    <!-- The runtime only accepts a primary-action button with variant="primary",
         and secondary-actions buttons with variant="secondary" (or "auto"). -->
    <template #primary-action>
      <SButton variant="primary">Save</SButton>
    </template>
    <template #secondary-actions>
      <SButton variant="secondary">Cancel</SButton>
    </template>
  </SModal>
</template>

Props

Prop	Type	विवरण
accessibilityLabel	string	modal का उद्देश्य बताने वाला label। सेट होने पर, assistive technologies इस्तेमाल करने वाले users को इसकी घोषणा की जाएगी और उन्हें अधिक संदर्भ मिलेगा। screen readers के लिए यह heading prop को override करता है।
heading	string	modal के content का वर्णन करने वाला title।
padding	"base" | "none"	modal content के चारों ओर padding समायोजित करें। base: element के लिए उपयुक्त padding लगाता है। none: element से सारी padding हटा देता है। यह तब उपयोगी हो सकता है जब modal के अंदर के elements को modal के किनारे तक फैलना हो, उदाहरण के लिए full-width image। ऐसे में, बाकी content के लिए वांछित padding वापस लाने के लिए 'base' padding वाले box का उपयोग करें।
size	"base" | "small-100" | "small" | "large" | "large-100"	modal component का आकार, जो उसकी चौड़ाई और ऊँचाई को नियंत्रित करता है। बड़े आकार सामग्री के लिए अधिक जगह देते हैं, जबकि छोटे आकार अधिक compact होते हैं।

Events

Event	Type
afterhide	CustomEvent
aftershow	CustomEvent
hide	CustomEvent
show	CustomEvent

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

Methods

<SModal> अपने underlying DOM element पर ये methods उपलब्ध कराता है (typed template ref के ज़रिए इस्तेमाल करें):

• hideOverlay() => void — overlay छिपाने का method।
• showOverlay() => void — overlay दिखाने का method।
• toggleOverlay() => void — overlay की visibility toggle करने का method।

<script setup>
import { useTemplateRef } from 'vue'
import { SModal } from 'polaris-vue-elements'

const modal = useTemplateRef<InstanceType<typeof SModal>>('modal')

function callHideOverlay() {
  modal.value?.$el.hideOverlay()
}
</script>

<template>
  <SModal ref="modal" />
</template>

Slots

Slot	विवरण
default	modal component के अंदर दिखाई जाने वाली सामग्री, जिसमें आमतौर पर form fields, जानकारी या interactive elements शामिल होते हैं।
primary-action	modal footer में दिखाया जाने वाला मुख्य action button, जो वह प्राथमिक action दर्शाता है जो उपयोगकर्ताओं को करना चाहिए। केवल एक button component स्वीकार करता है जिसका variant primary हो। यह action modal के मुख्य उद्देश्य के अनुरूप होना चाहिए।
secondary-actions	modal footer में दिखाए जाने वाले अतिरिक्त action buttons, जो वैकल्पिक या सहायक actions देते हैं। केवल secondary या auto variant वाले button components स्वीकार करता है। स्पष्ट hierarchy बनाने के लिए इन्हें दृश्य रूप से कम ज़ोर दिया जाता है।