SBanner <s-banner>

Uma mensagem em destaque que exibe informações importantes, avisos ou erros no topo de uma página ou seção. SBanner é o wrapper de Vue 3 tipado do web component <s-banner> do Shopify Polaris.

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

Boas práticas

• Trate de um único assunto por banner. Cada banner deve trazer uma única mensagem ou uma única ação necessária, para que os lojistas não fiquem se perguntando do que se trata.
• Escreva para uma leitura rápida. Mantenha o texto curto o bastante para que os lojistas entendam a mensagem e o que fazer em seguida num piscar de olhos.
• Dê aos lojistas um próximo passo. Banners com tone="info", tone="warning" ou tone="critical" devem incluir uma chamada para ação que diga exatamente como prosseguir.
• Deixe os lojistas fecharem os banners. Defina dismissible, a menos que a mensagem exija ação imediata, e evite banners que ficam na tela sem nenhuma forma de fechá-los.
• Posicione os banners conforme o escopo. Coloque um banner fora de qualquer seção para uma mensagem sobre a página inteira, ou dentro de uma seção quando ele se referir ao conteúdo dessa seção.

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

Veja as boas práticas da Shopify para <s-banner> (em inglês) para todas as recomendações.

Exemplo

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	Descrição
dismissible	boolean	Se o banner exibe um botão de fechar que permite aos usuários dispensá-lo. Quando o botão de fechar é pressionado, o evento dismiss é disparado, depois hidden é definido como true, qualquer animação é concluída e o evento afterhide é disparado.
heading	string	O texto do título exibido no topo do banner.
hidden	boolean	Controla se o banner está visível ou oculto. Ao usar um padrão de componente controlado com um banner dismissible, atualize esta propriedade para true quando o evento dismiss for disparado. Você pode ocultar o banner programaticamente definindo-a como true, mesmo que ele não seja dismissible.
tone	"auto" | "info" | "success" | "warning" | "critical"	O significado semântico e o tratamento de cor do componente. - info: conteúdo informativo ou dicas úteis. - success: resultados positivos ou estados de sucesso. - warning: avisos importantes sobre possíveis problemas. - critical: problemas urgentes ou ações destrutivas. - auto: determinado automaticamente com base no contexto.

Events

Event	Tipo
afterhide	CustomEvent
dismiss	CustomEvent

Escute-os com listeners no estilo @afterhide em <SBanner>.

Slots

Slot	Descrição
default	O conteúdo principal da mensagem exibido dentro do componente de banner, que fornece informações ou orientações importantes aos usuários.
secondary-actions	Botões de ação exibidos na parte inferior do banner que permitem aos usuários responder à mensagem. Aceita até dois componentes de botão com variant="secondary" ou variant="auto".