跳到内容 Shopify标志北极星

空的状态

当列表、表格或图表没有要显示的项或数据时，使用空状态。这是一个提供解释或指导的机会，帮助商家进步。当管理页面中的整个页面为空时，使用空状态组件，而不是用于界面中的单个元素或区域。

用于在商家使用某个功能之前对其进行解释。

进口{卡，EmptyState}从“@shopify /北极星”；进口反应从“反应”；函数EmptyStateExample（）{返回（<卡分段><EmptyState标题＝“管理你的库存转移”行动＝{{内容：“添加转移”}}secondaryAction＝{{内容：“了解更多”，url：“https://help.shopify.com”，}}图像＝“https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png”><p>跟踪并接收来自供应商的库存．</p></EmptyState></卡>）；}

道具

想让这个功能变得更好吗?请分享你的反馈．

接口 EmptyStateProps
标题？ 字符串

空的状态标题。
图像 字符串

要显示的图像的路径。当在卡片、模态或导航组件中使用空状态时，图像上方应该有~40px的空白。
largeImage？ 字符串

要在大屏幕上显示的图像的路径。
imageContained？ 布尔

在大屏幕上是否将图像限制为其容器的大小。
fullWidth？ 布尔

内容是否应该跨越其容器的整个宽度。
孩子们？ 反应．ReactNode

元素要在空状态中显示。
行动？

空状态的主要操作。
secondaryAction？

空状态的次要动作。
footerContent？ 反应．ReactNode

在空状态操作下面显示的次要元素。

最佳实践

空状态应该:

  • 通过清楚地解释产品或功能的好处和效用来引导商人
  • 通过关注几个关键功能和好处来简化复杂的体验
  • 使用简单明了的语言，使商家能够推动业务向前发展
  • 要鼓励，不要让商家因为没有使用产品或功能而感到不成功或内疚
  • 解释商家激活产品或功能需要采取的步骤
  • 使用插图深思熟虑，概述在我们的图解指南
  • 只使用一个主要的行动召唤按钮
  • 在内容(card、modal或navigation)内的空状态的底部提供额外的间距，以匹配传入组件的图像，其上方有40px的空白

内容的指导方针

标题

空的州标题应该:

  • 以行动为导向:鼓励商家采取激活产品或功能所需的步骤

做

  • 创建订单和发送发票

不

  • 订单和发票

副标题

空状态字幕的作用类似于正文内容。他们应该:

  • 描述或解释空状态标题或项目标题中的内容
  • 对话式的:使用the, a, an这样的冠词

主要行动

按钮用于您希望商家采取的最重要的操作。它们应该是:

  • 清晰和可预测:商家应该能够预测当他们点击按钮时会发生什么。不要用误导性的标题欺骗商家。

做

  • 创建订单
  • 购买运输标签

不

  • 新订单
  • 买
  • 动作导向:按钮应该总是以一个强烈的动词来引导动作。为了给商家提供足够的上下文，在按钮上使用{动词}+{名词}格式，除了Save、Close、Cancel或OK等常见操作。

做

  • 激活Apple Pay
  • 查看发货设置

不

  • 试试Apple Pay
  • 查看您的设置
  • 可扫描:避免不必要的词和冠词，如the, an, a。

做

  • 添加菜单项

不

  • 添加菜单项

二次行动

次要操作用于次要的操作，如“了解更多”或“关闭”按钮。它们应该遵循主按钮的所有其他内容规则。

可访问性

空状态插图是作为装饰图像实现的，因此它们使用空的alt属性并被屏幕阅读器等技术跳过。