SModal <s-modal>

Ein Dialog-Overlay für fokussierte Aufgaben und Bestätigungen, geöffnet per Befehl oder Methodenaufruf. SModal ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-modal>.

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

Best Practices

• Modals für Entscheidungen reservieren, die Fokus brauchen. Öffnen Sie eines, wenn Händler eine bestimmte Wahl treffen oder etwas Kritisches bestätigen müssen. Kann die Aufgabe oder das Werkzeug direkt auf der Seite stehen, belassen Sie es dort.
• Sparsam einsetzen. Jedes Modal unterbricht den Händler. Betrachten Sie es daher als letztes Mittel für wichtige Momente, nicht als Standardmuster.
• Die Hauptaktion hervorheben. Geben Sie dem Modal im Slot primary-action einen klaren, gut sichtbaren Call to Action.
• Aktionen mit konkreten Verben beschriften. Buttons wie „Delete“, „Save“ oder „Continue“ sagen Händlern, was passieren wird; vermeiden Sie allgemeine Labels wie „Yes“, „OK“ oder „Submit“.
• Folgen destruktiver Aktionen klar benennen. Löscht oder verwirft die Aktion etwas, beschreiben Sie im Modal-Text, was Händler verlieren.
• Modals nicht verschachteln. Öffnen Sie kein zweites Modal aus einem bereits geöffneten heraus.

<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>

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-modal> (auf Englisch).

Beispiel

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	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck des Modals beschreibt. Wenn gesetzt, wird es Nutzern assistiver Technologien vorgelesen und gibt ihnen mehr Kontext. Überschreibt für Screenreader die Prop heading.
heading	string	Ein Titel, der den Inhalt des Modals beschreibt.
padding	"base" | "none"	Passt den Innenabstand um den Inhalt des Modals an. base: wendet einen für das Element passenden Innenabstand an. none: entfernt jeglichen Innenabstand vom Element. Das ist nützlich, wenn Elemente im Modal bis zum Rand des Modals reichen sollen, zum Beispiel ein Bild in voller Breite. In diesem Fall eine Box mit einem Padding von 'base' verwenden, um den gewünschten Innenabstand für den restlichen Inhalt wiederherzustellen.
size	"base" | "small-100" | "small" | "large" | "large-100"	Die Größe der Modal-Komponente, die Breite und Höhe steuert. Größere Größen bieten mehr Platz für Inhalte, kleinere sind kompakter.

Events

Event	Typ
afterhide	CustomEvent
aftershow	CustomEvent
hide	CustomEvent
show	CustomEvent

Auf diese Events lauschen Sie mit Listenern im Stil von @afterhide auf <SModal>.

Methods

<SModal> stellt die folgenden Methoden auf dem zugrunde liegenden DOM-Element bereit (Zugriff über ein typisiertes Template-Ref):

• hideOverlay() => void — Methode zum Ausblenden eines Overlays.
• showOverlay() => void — Methode zum Anzeigen eines Overlays.
• toggleOverlay() => void — Methode zum Umschalten der Sichtbarkeit eines Overlays.

<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	Beschreibung
default	Der Inhalt innerhalb der Modal-Komponente, typischerweise Formularfelder, Informationen oder interaktive Elemente.
primary-action	Der Haupt-Aktionsbutton in der Fußzeile des Modals, der die primäre Aktion für Benutzer darstellt. Akzeptiert nur eine einzelne Button-Komponente mit der variant primary. Diese Aktion sollte zum Hauptzweck des Modals passen.
secondary-actions	Zusätzliche Aktions-Buttons im Footer des Modals für alternative oder unterstützende Aktionen. Akzeptiert nur Button-Komponenten mit einer variant von secondary oder auto. Sie werden visuell zurückgenommen, um eine klare Hierarchie herzustellen.