SBanner <s-banner>

Eine auffällige Meldung, die wichtige Informationen, Warnungen oder Fehler oben auf einer Seite oder in einem Abschnitt hervorhebt. SBanner ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-banner>.

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

Best Practices

• Ein Thema pro Banner. Jedes Banner sollte genau eine Nachricht oder eine erforderliche Aktion enthalten, damit Händler nicht rätseln müssen, worum es geht.
• Für schnelles Überfliegen schreiben. Halten Sie den Text so kurz, dass Händler die Nachricht und den nächsten Schritt auf einen Blick erfassen.
• Einen nächsten Schritt anbieten. Banner mit tone="info", tone="warning" oder tone="critical" sollten einen Call to Action enthalten, der konkret sagt, wie es weitergeht.
• Banner schließbar machen. Setzen Sie dismissible, sofern die Nachricht kein sofortiges Handeln erfordert, und vermeiden Sie Banner, die sich nicht schließen lassen.
• Banner nach Geltungsbereich platzieren. Ein Banner zur gesamten Seite gehört außerhalb jeder Section, ein Banner zum Inhalt einer Section in diese 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>

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

Beispiel

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	Typ	Beschreibung
dismissible	boolean	Ob das Banner einen Schließen-Button anzeigt, mit dem Benutzer es ausblenden können. Beim Drücken des Schließen-Buttons wird das Event dismiss ausgelöst, dann wird hidden auf true gesetzt, eine eventuelle Animation wird abgeschlossen und das Event afterhide wird ausgelöst.
heading	string	Der Überschriftentext, der oben im Banner angezeigt wird.
hidden	boolean	Steuert, ob das Banner sichtbar oder ausgeblendet ist. Bei einem kontrollierten Komponentenmuster mit dismissible-Banner diese Eigenschaft auf true setzen, wenn das Event dismiss ausgelöst wird. Das Banner lässt sich programmatisch ausblenden, indem dies auf true gesetzt wird, auch wenn es nicht dismissible ist.
tone	"auto" | "info" | "success" | "warning" | "critical"	Die semantische Bedeutung und farbliche Gestaltung der Komponente. - info: Informative Inhalte oder hilfreiche Tipps. - success: Positive Ergebnisse oder erfolgreiche Zustände. - warning: Wichtige Warnungen vor möglichen Problemen. - critical: Dringende Probleme oder destruktive Aktionen. - auto: Wird automatisch anhand des Kontexts bestimmt.

Events

Event	Typ
afterhide	CustomEvent
dismiss	CustomEvent

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

Slots

Slot	Beschreibung
default	Der Hauptinhalt der Nachricht innerhalb der Banner-Komponente, der Benutzern wichtige Informationen oder Hinweise liefert.
secondary-actions	Aktions-Buttons am unteren Rand des Banners, mit denen Nutzer auf die Meldung reagieren können. Akzeptiert bis zu zwei Button-Komponenten mit variant="secondary" oder variant="auto".