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을 설정하고, 닫을 방법 없이 화면에 계속 남는 배너는 피합니다.
범위에 따라 배너를 배치하세요. 페이지 전체에 관한 메시지라면 배너를 어떤 섹션에도 넣지 말고, 특정 섹션의 콘텐츠에 관한 메시지라면 해당 섹션 안에 넣습니다.

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 형식의 리스너로 이 events를 수신하세요.

Slots

Slot	설명
`default`	배너 컴포넌트 안에 표시되는 주요 메시지 콘텐츠로, 사용자에게 중요한 정보나 안내를 제공합니다.
`secondary-actions`	배너 하단에 표시되어 사용자가 메시지에 응답할 수 있게 하는 액션 버튼입니다. `variant="secondary"` 또는 `variant="auto"`인 버튼 컴포넌트를 최대 두 개까지 받습니다.

SBanner <s-banner> ​

모범 사례 ​

예시 ​

Props ​

Events ​

Slots ​

SBanner `<s-banner>`

모범 사례

예시

Props

Events

Slots