SEmptyState `<s-empty-state>`

화면에 아직 콘텐츠가 없는 이유를 설명하고 판매자가 해야 할 첫 작업을 안내합니다. SEmptyState은(는) Shopify Polaris <s-empty-state> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

원인을 설명한 뒤 해결 방법을 제시하세요. "No products"라는 제목만 있으면 판매자는 추측할 수밖에 없습니다. heading으로 왜 아무것도 없는지 말하고, 다음 단계는 액션이 담당하게 합니다.
하나의 주요 액션을 앞세우세요. 판매자가 빈 상태에서 벗어나게 해 주는 단 하나의 단계에는 primary-action 슬롯을 사용하고, 다른 선택지는 secondary-actions에 둡니다.
필터 결과는 다르게 표현하세요. 아무것도 없는 리소스와 일치하는 항목이 없는 필터는 서로 다른 상황입니다. 필터 결과의 경우 판매자에게 필터를 어떻게 조정하면 되는지 알려 줍니다.
그래픽은 부가 요소로 취급하세요. 핵심 역할은 제목과 액션이 하므로, 밀도가 높은 레이아웃에서는 graphic 슬롯을 비워 두고, 사용할 때는 아이콘이나 이미지 하나로 제한합니다.

vue

<SEmptyState heading="You haven't added any products yet">
  <template #primary-action>
    <SButton variant="primary">Add product</SButton>
  </template>
  <template #secondary-actions>
    <SButton>Import products</SButton>
  </template>
</SEmptyState>

전체 가이드는 <s-empty-state>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

Once a customer places an order, it will show up here. Learn more about orders

Create order

Import orders

vue

<script setup>
import { SEmptyState, SButton, SIcon, SText, SLink } from 'polaris-vue-elements'
</script>

<template>
  <SEmptyState heading="No orders yet">
    <template #graphic>
      <SIcon type="cart" size="large" />
    </template>
    <template #subheading>
      <SText>Once a customer places an order, it will show up here. <SLink href="https://help.shopify.com/orders" target="_blank">Learn more about orders</SLink></SText>
    </template>
    <template #primary-action>
      <SButton variant="primary">Create order</SButton>
    </template>
    <template #secondary-actions>
      <SButton variant="secondary">Import orders</SButton>
    </template>
  </SEmptyState>
</template>

Props

Prop	타입	설명
`heading`	`string`	EmptyState의 제목입니다.

Slots

Slot	설명
`graphic`	제목 위에 표시되는 일러스트레이션이나 심볼입니다. `Image` 또는 `Icon` 하나를 직접 받거나, 감싸는 요소의 유일한 자식으로 받습니다.
`primary-action`	텍스트 콘텐츠 아래에 렌더링되는 주요 콜투액션입니다. `variant`가 `primary`인 단일 `Button`을 허용하며, 그 외의 것은 개발 경고와 함께 무시됩니다.
`secondary-actions`	기본 액션 옆에 렌더링되는 대체 액션입니다. `variant`가 `secondary` 또는 `auto`인 `Button` 하나를 받습니다. 이름은 복수형이지만 하나만 렌더링됩니다.
`subheading`	제목 아래의 보조 텍스트로, 무엇이 없는지 또는 다음에 무엇을 해야 하는지 설명합니다. `Text`와 `Link` 컴포넌트를 받습니다.

SEmptyState <s-empty-state> ​

모범 사례 ​

예시 ​

Props ​

Slots ​

SEmptyState `<s-empty-state>`

모범 사례

예시

Props

Slots