跳到内容 Shopify标志北极星

空的状态

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

用于在商家使用某个特性之前解释该特性。

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

道具

想要帮助完善这个功能吗?请分享你的反馈．

接口 EmptyStateProps
标题? 字符串

空状态标题。
图像 字符串

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

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

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

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

元素在空状态下显示。
行动?

空状态的主要操作。
secondaryAction?

空状态的辅助动作。
footerContent? 反应．ReactNode

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

最佳实践

空状态应该:

  • 通过清楚地解释产品或功能的好处和效用来引导商家
  • 通过关注一些关键功能和好处来简化复杂的体验
  • 使用简单明了的语言，使商家能够推动他们的业务向前发展
  • 要鼓励，永远不要让商家因为没有使用过产品或功能而感到不成功或内疚
  • 解释商家激活产品或功能需要采取的步骤
  • 仔细使用插图概述在我们图解指南
  • 只使用一个主要的呼叫按钮
  • 在内容(卡片、模式或导航)内的空状态的底部提供额外的间距，以匹配传递到组件的图像，并在其上方留出40px的空白空间

内容的指导方针

标题

空状态标题应该:

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

做

  • 创建订单并发送发票

不

  • 订单和发票

副标题

空状态字幕就像正文内容一样。他们应该:

  • 描述或解释空状态标题或项目标题中的内容
  • 会话化:包括冠词，如the, a和an

主要行动

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

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

做

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

不

  • 新订单
  • 买
  • 行动导向:按钮应该总是以鼓励行动的强烈动词开头。为了给商家提供足够的上下文，在按钮上使用{动词}+{名词}格式，除了保存、关闭、取消或确定等常见操作。

做

  • 激活Apple Pay
  • 查看运输设置

不

  • 试试苹果支付
  • 查看您的设置
  • 可扫描的:避免不必要的单词和冠词，如the, an, a。

做

  • 添加菜单项

不

  • 添加菜单项

二次行动

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

可访问性

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