SBanner <s-banner>

Un mensaje destacado que muestra información importante, advertencias o errores en la parte superior de una página o sección. SBanner es el wrapper de Vue 3 tipado del web component <s-banner> de Shopify Polaris.

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

Buenas prácticas

• Un solo tema por banner. Cada banner debe transmitir un único mensaje o una única acción requerida, para que los comerciantes no se pregunten de qué se trata.
• Escribe para una lectura rápida. Mantén el texto lo bastante corto para que los comerciantes entiendan el mensaje y qué hacer a continuación de un vistazo.
• Indica a los comerciantes el siguiente paso. Los banners con tone="info", tone="warning" o tone="critical" deben incluir una llamada a la acción que diga concretamente cómo continuar.
• Permite que los comerciantes cierren los banners. Define dismissible salvo que el mensaje requiera una acción inmediata, y evita los banners que permanecen en pantalla sin ninguna forma de cerrarlos.
• Coloca los banners según su alcance. Pon un banner fuera de cualquier sección para un mensaje sobre toda la página, o dentro de una sección cuando se refiera al contenido de esa sección.

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

Consulta las buenas prácticas de Shopify para <s-banner> (en inglés) para ver todas las recomendaciones.

Ejemplo

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	Tipo	Descripción
dismissible	boolean	Si el banner muestra un botón de cierre que permite a los usuarios descartarlo. Al pulsar el botón de cierre, se dispara el evento dismiss, después hidden se establece en true, se completa cualquier animación y se dispara el evento afterhide.
heading	string	El texto del encabezado que se muestra en la parte superior del banner.
hidden	boolean	Controla si el banner está visible u oculto. Cuando uses un patrón de componente controlado y el banner sea dismissible, establece esta propiedad en true cuando se dispare el evento dismiss. Puedes ocultar el banner mediante programación estableciéndola en true aunque no sea dismissible.
tone	"auto" | "info" | "success" | "warning" | "critical"	El significado semántico y el tratamiento de color del componente. - info: contenido informativo o consejos útiles. - success: resultados positivos o estados de éxito. - warning: advertencias importantes sobre posibles problemas. - critical: problemas urgentes o acciones destructivas. - auto: se determina automáticamente según el contexto.

Events

Event	Tipo
afterhide	CustomEvent
dismiss	CustomEvent

Escúchalos con listeners del estilo @afterhide en <SBanner>.

Slots

Slot	Descripción
default	El contenido del mensaje principal que se muestra dentro del componente banner y que ofrece información o indicaciones importantes a los usuarios.
secondary-actions	Botones de acción que se muestran en la parte inferior del banner y permiten a los usuarios responder al mensaje. Acepta hasta dos componentes de botón con variant="secondary" o variant="auto".