代码演示
如何引入
基本用法
通过
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