代码演示
如何引入
基本用法
通过
image 设置占位图片，可以从 @douyinfe/semi-illustrations 中手动引入对应的插画（插画默认宽高是200x200），也可以传入自定义的插画。目前拥有的插画可以查看占位图插画。v>=1.13.0 之后增加一系列暗色模式的插画，并支持通过
darkModeImage 传入暗色模式下需要使用的插画，以更好地适配暗色模式。自定义
通过
children 可以实现自定义的描述内容。也可以不使用图片。
不同布局
支持 2 种类型的布局：
vertical、horizontal。默认为 vertical。占位图插画(建设中)
目前
@douyinfe/semi-illustrations 中支持以下插画。由于插画库还在建设中，请随时留意后续可能发生的改变。
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
