SBanner <s-banner>

Một thông báo nổi bật hiển thị thông tin quan trọng, cảnh báo hoặc lỗi ở đầu trang hoặc một section. SBanner là Vue 3 wrapper có type cho web component <s-banner> của Shopify Polaris.

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

Best practices

• Mỗi banner chỉ nói một việc. Mỗi banner nên mang một thông điệp hoặc một hành động bắt buộc duy nhất, để người bán không phải băn khoăn nó nói về điều gì.
• Viết để đọc lướt nhanh. Giữ văn bản đủ ngắn để người bán nắm được thông điệp và việc cần làm tiếp theo chỉ trong một cái nhìn.
• Cho người bán bước tiếp theo. Banner có tone="info", tone="warning" hoặc tone="critical" nên kèm một lời kêu gọi hành động nói cụ thể cách tiếp tục.
• Cho phép người bán đóng banner. Đặt dismissible trừ khi thông điệp cần được xử lý ngay, và tránh những banner nằm mãi trên màn hình mà không có cách đóng.
• Đặt banner theo phạm vi. Đặt banner bên ngoài mọi section cho thông điệp về toàn trang, hoặc bên trong một section khi nó liên quan đến nội dung của 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>

Xem best practices của Shopify cho <s-banner> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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	Kiểu	Mô tả
dismissible	boolean	Banner có hiển thị nút đóng cho phép người dùng bỏ qua nó hay không. Khi nhấn nút đóng, event dismiss được kích hoạt, sau đó hidden được đặt thành true, mọi animation hoàn tất, rồi event afterhide được kích hoạt.
heading	string	Văn bản tiêu đề hiển thị ở đầu banner.
hidden	boolean	Kiểm soát việc banner hiển thị hay bị ẩn. Khi dùng mẫu controlled component và banner là dismissible, hãy cập nhật thuộc tính này thành true khi event dismiss được kích hoạt. Bạn có thể ẩn banner bằng code bằng cách đặt giá trị này thành true ngay cả khi banner không dismissible.
tone	"auto" | "info" | "success" | "warning" | "critical"	Ý nghĩa ngữ nghĩa và cách xử lý màu sắc của component. - info: Nội dung thông tin hoặc mẹo hữu ích. - success: Kết quả tích cực hoặc trạng thái thành công. - warning: Cảnh báo quan trọng về vấn đề tiềm ẩn. - critical: Vấn đề khẩn cấp hoặc hành động phá hủy. - auto: Tự động xác định dựa trên ngữ cảnh.

Events

Event	Kiểu
afterhide	CustomEvent
dismiss	CustomEvent

Lắng nghe các event này bằng listener dạng @afterhide trên <SBanner>.

Slots

Slot	Mô tả
default	Nội dung thông điệp chính hiển thị bên trong component banner, cung cấp thông tin hoặc hướng dẫn quan trọng cho người dùng.
secondary-actions	Các nút hành động hiển thị ở cuối banner, cho phép người dùng phản hồi thông điệp. Chấp nhận tối đa hai button component có variant="secondary" hoặc variant="auto".