EmptyState 空状态EmptyState
该有内容的地方现在是空的：列表里还没有数据、搜索没有结果、筛选条件太严。说清为什么空，并给出下一步。
基本用法
图示、标题、说明、操作，自上而下居中排列。只有 title 是必填的。
收件箱是空的
新的消息会出现在这里。你也可以先给同事发一条。
尺寸
sm 用在表格、下拉、侧栏这类小区域里；lg 用在整页为空的时候。
没有匹配的结果
换个关键词试试。
暂无通知
有新动态时会提醒你。
还没有文件
把文件拖到这里上传。
插画与额外内容
icon 位置传图片或自己的 SVG 时不再套圆形底。children 插在说明和操作之间。
还没有创建看板
看板能把任务按状态排成几列。
⌘ N接口
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title* | ReactNode | — | 标题：一句话说清现在的状况。 |
icon | ReactNode | — | 图示位：图标或插画。 |
description | ReactNode | — | 说明：为什么空、接下来能做什么。 |
actions | ReactNode | — | 操作按钮。 |
titleAs | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'h3' | 标题用什么元素。 |
size | 'sm' | 'md' | 'lg' | 'md' | 图示、字号和留白的档位。 |
children | ReactNode | — | 插在说明和操作之间的额外内容。 |
无障碍
- 标题默认是
h3，会出现在读屏的标题导航里；请用titleAs对齐页面层级，在很小的区域（下拉、表格单元格）里用p。 - 图示位整体对读屏隐藏，所以不要把关键信息只画在插画里。
- 空状态是搜索或筛选之后动态出现的时候，把它放进
role="status"的容器，读屏才会知道“没有结果”。 - 操作是普通按钮，按文档顺序 Tab 到；组件本身没有键盘操作。