SEmptyState <s-empty-state>

画面にまだコンテンツがない理由を説明し、マーチャントが最初に行うべきアクションへ誘導します。 SEmptyState は、Shopify Polaris の <s-empty-state> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• 原因を説明し、次に解決策を示す。 「No products」という見出しだけでは、マーチャントは推測するしかありません。heading で何もない理由を伝え、アクションで次のステップを示します。
• プライマリアクションは 1 つに絞る。 マーチャントが空の状態から抜け出すための 1 つのステップには primary-action スロットを使い、その他の選択肢は secondary-actions に置きます。
• フィルター結果では言い回しを変える。 何も登録されていないリソースと、フィルターに一致するものがない場合とは異なる状況です。フィルター結果では、フィルターの調整方法をマーチャントに伝えます。
• グラフィックは補助として扱う。 主な役割を果たすのは見出しとアクションなので、密度の高いレイアウトでは graphic スロットを空のままにし、使う場合もアイコンまたは画像 1 つに限ります。

<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 ordersCreate orderImport orders

<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 を 1 つ、直接またはラッパー要素の唯一の子として受け付けます。
primary-action	テキストコンテンツの下にレンダリングされるメインの行動喚起（CTA）です。variant が primary の単一の Button を受け付けます。それ以外は開発時の警告とともに無視されます。
secondary-actions	プライマリアクションの横に描画される代替アクションです。variant が secondary または auto の Button を 1 つ受け付けます。名前は複数形ですが、描画されるのは 1 つだけです。
subheading	見出しの下に表示される補足テキストで、何が不足しているか、次に何をすべきかを説明します。Text と Link コンポーネントを受け付けます。