空状态

一片空白看起来就像出了 bug。空状态会说明哪块是空的、为什么空，以及接下来该做什么——而它恰恰是最容易被忘掉的场景，因为开发时永远都有数据。

基础空状态

还没有文章

往 src/posts 放一个 Markdown 文件，它就会出现在这里。

empty({
  title: '还没有文章',
  description: '往 src/posts 放一个 Markdown 文件，它就会出现在这里。',
})

带图标

图标只是装饰——它带着 aria-hidden，因为标题已经把情况说清楚了。

这里什么都没有

这个目录里没有任何页面。

empty({
  icon: icon('folder'),
  title: '这里什么都没有',
  description: '这个目录里没有任何页面。',
})

带操作

子元素会成为那一行操作按钮。

没有「区块」的搜索结果

检查一下拼写，或者直接去翻文档。

浏览文档
empty({
  icon: icon('search'),
  title: '没有「区块」的搜索结果',
  description: '检查一下拼写，或者直接去翻文档。',
},
  button({ href: '/zh/docs' }, '浏览文档'),
  button({ variant: 'outline', color: 'neutral' }, '清空搜索'),
)

在卡片中

部署记录

还没有部署过

推送到 main，第一次构建就会出现在这里。

card(
  cardHeader({ title: '部署记录' }),
  cardBody(
    empty({
      title: '还没有部署过',
      description: '推送到 main，第一次构建就会出现在这里。',
    }, button({ size: 'sm' }, '连接一个仓库')),
  ),
)

用来替代表格

与其渲染一个下面没有任何行的表头，不如把表格换成空状态。

构建历史

没有构建记录

站点至少部署过一次之后，运行记录就会出现在这里。

return (() => {
  const rows = []

  return card(
    cardHeader({ title: '构建历史' }),
    rows.length
      ? table({ columns: [{ key: 'commit', header: '提交' }], rows })
      : cardBody(empty({
          title: '没有构建记录',
          description: '站点至少部署过一次之后，运行记录就会出现在这里。',
        })),
  )
})()

属性

属性类型默认值说明
iconChild—标题上方的装饰性字形；对屏幕阅读器隐藏。
titleChild—用几个字说明什么是空的。
descriptionChild—为什么是空的，或者该怎么办。

子元素会渲染成描述下方的那一行操作。