代码演示
如何引入
jsx
import { Empty } from '@kousum/semi-ui-vue';基本用法
通过 image 设置占位图片，可以从 @kousum/semi-illustrations-vue 中手动引入对应的插画（插画默认宽高是200x200），也可以传入自定义的插画。目前拥有的插画可以查看占位图插画。
v>=1.13.0 之后增加一系列暗色模式的插画，并支持通过 darkModeImage 传入暗色模式下需要使用的插画，以更好地适配暗色模式。
自定义
通过 children 可以实现自定义的描述内容。
也可以不使用图片。
不同布局
支持 2 种类型的布局：vertical、horizontal。默认为 vertical。
占位图插画(建设中)
目前 @kousum/semi-illustrations-vue 中支持以下插画。
由于插画库还在建设中，请随时留意后续可能发生的改变。
API 参考
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| className | 类名 | string | - |
| darkModeImage | 暗色模式开启后的占位图，响应 document.body 的 theme-mode 属性变化 v>=1.13.0 | ReactNode | - |
| description | 内容描述 | ReactNode | - |
| image | 占位图 | ReactNode | { id?: string; viewBox?: string; url?: string;} | - |
| imageStyle | 占位图样式 | CSSProperties | - |
| layout | 布局方式，支持 vertical, horizontal | string | vertical |
| style | 样式名 | CSSProperties | - |
| title | 标题 v>=1.0.0 | ReactNode | - |
Accessibility
ARIA
- Empty 插图的 aria-hidden 为 true
文案规范
- 标题
- 标题应该简洁易懂
- 正文
- 可以展示展示空状态的具体原因，也可以展示后续的操作行为去帮助用户消除空状态
- 不要重复标题上的内容
- 尽量保持正文在 1-2 句话内
- 动作按钮
- 按钮文案需要足够清晰和容易理解
- 使用 动词 + 名词 的格式