SEmptyState <s-empty-state>

说明视图为何还没有内容，并引导商家完成第一步操作。 SEmptyState 是 Shopify Polaris <s-empty-state> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 先说明原因，再给出解决办法。 只写一个“没有产品”的标题会让商家摸不着头脑。用 heading 说明为什么这里没有内容，再由操作引导下一步。
• 以一个主要操作为主。 在 primary-action slot 中放置能让商家摆脱空状态的那一步操作，并将其他选项放在 secondary-actions 中。
• 对筛选结果使用不同的措辞。 资源本身为空和筛选条件没有匹配到任何内容是两种不同的情况。对于筛选结果，请告诉商家如何调整筛选条件。
• 把图形当作锦上添花。 标题和操作才是关键，因此在紧凑布局中请让 graphic slot 留空；如果确实要使用，也只放一个图标或一张图片。

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

参阅 Shopify 关于 <s-empty-state> 的最佳实践（英文）以获取完整指南。

示例

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，可以直接放置，也可以作为包裹元素的唯一子元素。
primary-action	主要行动号召，渲染在文本内容下方。接受单个 variant 为 primary 的 Button；其他内容会被忽略，并给出开发警告。
secondary-actions	一个替代操作，渲染在主要操作旁边。接受单个 variant 为 secondary 或 auto 的 Button——尽管名称是复数，但只会渲染一个。
subheading	标题下方的辅助文本，说明缺少什么或下一步该做什么。接受 Text 和 Link 组件。