反馈
EmptyState - 空状态
一个还什么都没有的集合。
用法
什么时候用它
import { EmptyState } from '@misoto22/folio'说明
一个还什么都没有的集合。
和 ErrorState 不是一回事：这里没有出错，所以文案说的是该做什么，而不是什么失败了。它们是两个组件，因为那个共同的诱惑——一个组件加一个 variant——生产出来的错误页读起来会像空文件夹。
结构
| 部件 | 说明 |
|---|---|
| 外框必填 | 一根居中的竖列，上下各 80px 内边距，两侧是 --page-pad。它是视图尺度的，自己不带任何 role，也没有 live region。 |
| 圆章 | 可选的 24px Remix Icon 字形，装在一个 56px 的 --stone 圆里，aria-hidden。它是让这根竖列有个起头的装饰，永远不是消息本身。 |
| 标题必填 | title，用标题字体、--fs-sub 字号，经由 Heading 渲染。level 决定用哪个元素、默认是 2；字号不跟着它走，所以无论哪一级，标题都是 --fs-sub。 |
| 描述 | description，--ink-3-aa 色，宽度封顶 24rem，这样竖列保持居中的同时，行长仍然是可读的。 |
| 操作 | 接下来该做的那一件事，在描述下方 32px 处，也是这个外框提供的唯一可交互元素。 |
实践建议
推荐
- 这次替换要你自己播报。这个组件没有 role、也没有 live region，所以用它换掉 SkeletonPage，等于拿走了那个说过「正在加载项目」的区域，却没有放任何东西进去——读屏用户停留在它最后听到的那句话上。
- 要说清楚这是哪一种空。同一个组件既服务于一个全新的集合，也服务于一个被筛选清空的集合；在一个仍然生效的筛选条件上显示「还没有项目」，是在告诉读者他的项目没了。
- level 按它上面那个标题来定。默认的 2 用在页面 h1 正下方是对的；放在一个已经有自己 h2 的区块里，就要传 3。定错了，大纲上就多一个洞，而读屏用户正是靠大纲导航的。
避免
- 不要用它来表示请求失败。被告知集合是空的读者会照着做——重新创建一条他本来就有的记录，或者上报一次根本没发生过的数据丢失——而这之后的补救，比一开始就给一个错误页贵得多。
- 不要把它放进卡片或面板里。上下合计 160px 的内边距是按顶替一整个视图量的，装进一个带边框的盒子里，它读起来就是一个中间破了个洞的盒子。
- 不要往 description 里写一整段。它封顶 24rem 且居中，所以长文案会变成一根又窄又参差的竖条，眼睛在读到那句关键的话之前就已经折返了。
示例
default
一个刚建好的集合，以及接下来要做的那一件事。文案说的是该做什么，而不是什么失败了，这就是它和 ErrorState 之间的全部差别，也是它们是两个组件、而不是一个组件加一个 variant 的理由。这个框不带 role、也不带实时区域，所以把一个 SkeletonPage 换成它，等于把那个说着「正在加载项目」的区域移走、又没放任何东西进去——到达这件事得你自己去播报。title 会开一个二级标题，紧跟在页面的 h1 下面时这是对的；放在一个已经有自己 h2 的区块里，就传 level={3}，别在标题导航里留个洞。
No projects yet
Everything you publish will show up here. Start with the one you are already building.
emptied by a filter
同一个组件，说明这是哪一种空。在一个正生效的筛选器上方显示「还没有项目」，是在告诉读者他的项目没了，而从这个念头里恢复过来的代价，比那句话本身要大得多——所以把开着的筛选条件点出来，说明清掉它们能换回什么，并且让那个动作成为脱离此状态的出口，而不是第二个入口。description 被限制在 24rem 并居中，好让它保持是一句话：更长的文案会变成一根又窄又参差的柱子，眼睛还没读到要紧的那一段就折回去了。
No projects match these filters
Archived and 2019 are both on. Clearing them brings back 34 projects.
empty or failed
「这里还什么都没有」对上「出错了」。这一对并不对称，这正是这个区分要紧的原因：一个被告知请求失败的读者会去重试，而一个被告知集合是空的读者会去行动——去创建一条他手上其实已经有的记录，或者去上报一次根本没发生的数据丢失。所以请求出错时就说出来，哪怕这一天那份列表本来也会是空的。真实使用中两者都是视图尺寸的——错误那一侧是整屏视口，空那一侧带着 160px 的上下留白；这里各自缩短了，好共用一块画布。
No invoices yet
The first invoice you issue for this client will appear here.
Invoices could not be loaded
The billing service did not answer. Your invoices are not affected.
Check service status