SBanner `<s-banner>`

ページやセクションの上部に、重要な情報、警告、エラーを目立つ形で表示するメッセージ。 SBanner は、Shopify Polaris の <s-banner> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

1 つのバナーで扱うのは 1 つのことだけ。 各バナーには 1 つのメッセージ、または 1 つの必要なアクションだけを載せ、何についてのバナーなのかマーチャントが迷わないようにします。
ざっと読んで伝わるように書く。 テキストは短くし、マーチャントがメッセージと次にすべきことをひと目で把握できるようにします。
次のステップを示す。 tone="info"、tone="warning"、tone="critical" のバナーには、どう進めればよいかを具体的に示すコールトゥアクションを含めます。
マーチャントがバナーを閉じられるようにする。 メッセージがすぐの対応を必要としない限り dismissible を設定し、閉じる手段のないまま画面に残り続けるバナーは避けます。
範囲に応じてバナーを配置する。 ページ全体に関するメッセージならバナーをどのセクションの外にも置き、特定のセクションの内容に関するものならそのセクションの中に置きます。

vue

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

詳しいガイダンスについては、<s-banner> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Your changes have been saved.

We couldn't process the payment. Please try again.

Retry

vue

<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"` のボタンコンポーネントを最大 2 つまで受け付けます。

SBanner <s-banner> ​

ベストプラクティス ​

例 ​

Props ​

Events ​

Slots ​

SBanner `<s-banner>`

ベストプラクティス

例

Props

Events

Slots