SBanner <s-banner>

Un message bien visible qui met en avant des informations importantes, des avertissements ou des erreurs en haut d'une page ou d'une section. SBanner est le wrapper Vue 3 typé du web component <s-banner> de Shopify Polaris.

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

Bonnes pratiques

• Un seul sujet par bannière. Chaque bannière doit porter un seul message ou une seule action requise, pour que les marchands ne se demandent pas de quoi il s'agit.
• Écrivez pour une lecture rapide. Gardez un texte assez court pour que les marchands saisissent le message et la marche à suivre d'un seul coup d'œil.
• Indiquez aux marchands l'étape suivante. Les bannières avec tone="info", tone="warning" ou tone="critical" doivent inclure un appel à l'action qui précise comment procéder.
• Laissez les marchands fermer les bannières. Définissez dismissible, sauf si le message exige une action immédiate, et évitez les bannières qui restent à l'écran sans aucun moyen de les fermer.
• Placez les bannières selon leur portée. Mettez une bannière en dehors de toute section pour un message qui concerne la page entière, ou à l'intérieur d'une section lorsqu'il porte sur le contenu de cette 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>

Consultez les bonnes pratiques de Shopify pour <s-banner> (en anglais) pour l'ensemble des recommandations.

Exemple

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	Description
dismissible	boolean	Indique si la bannière affiche un bouton de fermeture permettant aux utilisateurs de la masquer. Lorsque le bouton de fermeture est pressé, l'événement dismiss est déclenché, puis hidden passe à true, l'éventuelle animation se termine et l'événement afterhide est déclenché.
heading	string	Le texte du titre affiché en haut de la bannière.
hidden	boolean	Contrôle si la bannière est visible ou masquée. Avec un composant contrôlé et une bannière dismissible, passez cette propriété à true lorsque l'événement dismiss est déclenché. Vous pouvez masquer la bannière par programmation en la définissant à true, même si elle n'est pas dismissible.
tone	"auto" | "info" | "success" | "warning" | "critical"	La signification sémantique et le traitement des couleurs du composant. - info : contenu informatif ou conseils utiles. - success : résultats positifs ou états de réussite. - warning : avertissements importants sur des problèmes potentiels. - critical : problèmes urgents ou actions destructrices. - auto : déterminé automatiquement selon le contexte.

Events

Event	Type
afterhide	CustomEvent
dismiss	CustomEvent

Écoutez-les avec des listeners de la forme @afterhide sur <SBanner>.

Slots

Slot	Description
default	Le contenu du message principal affiché dans le composant banner, qui fournit des informations ou des indications importantes aux utilisateurs.
secondary-actions	Boutons d'action affichés en bas de la bannière, permettant aux utilisateurs de répondre au message. Accepte jusqu'à deux composants bouton avec variant="secondary" ou variant="auto".