SBanner <s-banner>

在页面或区块顶部展示重要信息、警告或错误的醒目消息。 SBanner 是 Shopify Polaris <s-banner> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 每个横幅只讲一件事。 每个横幅应只承载一条消息或一个必需的操作，避免商家不清楚它的用意。
• 便于快速浏览。 文字要足够简短，让商家一眼就能理解消息内容以及下一步该做什么。
• 为商家提供下一步操作。 使用 tone="info"、tone="warning" 或 tone="critical" 的横幅应包含一个行动号召，具体说明如何继续。
• 允许商家关闭横幅。 除非消息需要立即处理，否则请设置 dismissible，并避免使用一直停留在屏幕上且无法关闭的横幅。
• 按作用范围放置横幅。 关于整个页面的消息，将横幅放在所有 section 之外；与某个 section 的内容相关时，则放在该 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>

参阅 Shopify 关于 <s-banner> 的最佳实践（英文）以获取完整指南。

示例

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	类型	说明
dismissible	boolean	横幅是否显示允许用户关闭它的关闭按钮。按下关闭按钮时，会触发 dismiss 事件，然后将 hidden 设置为 true，待动画完成后触发 afterhide 事件。
heading	string	显示在横幅顶部的标题文本。
hidden	boolean	控制横幅是可见还是隐藏。在使用受控组件模式且横幅为 dismissible 时，请在 dismiss 事件触发时将此属性更新为 true。即使横幅不是 dismissible，也可以通过将其设置为 true 以编程方式隐藏横幅。
tone	"auto" | "info" | "success" | "warning" | "critical"	组件的语义含义和配色处理。 - info：说明性内容或实用提示。 - success：积极结果或成功状态。 - warning：关于潜在问题的重要警告。 - critical：紧急问题或破坏性操作。 - auto：根据上下文自动确定。

Events

Event	类型
afterhide	CustomEvent
dismiss	CustomEvent

在 <SBanner> 上使用 @afterhide 形式的监听器来监听这些事件。

Slots

Slot	说明
default	横幅组件中显示的主要消息内容，为用户提供重要信息或指引。
secondary-actions	显示在横幅底部、供用户响应消息的操作按钮。最多接受两个 variant="secondary" 或 variant="auto" 的按钮组件。