展示类 · Empty
空状态
空状态时的展示占位图。

代码演示

如何引入

基本用法

通过 image 设置占位图片,可以从 @douyinfe/semi-illustrations 中手动引入对应的插画(插画默认宽高是200x200),也可以传入自定义的插画。目前拥有的插画可以查看占位图插画
v>=1.13.0 之后增加一系列暗色模式的插画,并支持通过 darkModeImage 传入暗色模式下需要使用的插画,以更好地适配暗色模式。

自定义

通过 children 可以实现自定义的描述内容。
也可以不使用图片。

不同布局

支持 2 种类型的布局:verticalhorizontal。默认为 vertical

占位图插画(建设中)

目前 @douyinfe/semi-illustrations 中支持以下插画。
由于插画库还在建设中,请随时留意后续可能发生的改变。

API 参考

属性说明类型默认值
className类名string-
darkModeImage暗色模式开启后的占位图,响应 document.body 的 theme-mode 属性变化 v>=1.13.0ReactNode-
description内容描述ReactNode-
image占位图ReactNode | { id?: string; viewBox?: string; url?: string;}-
imageStyle占位图样式CSSProperties-
layout布局方式,支持 vertical, horizontalstringvertical
style样式名CSSProperties-
title标题 v>=1.0.0ReactNode-

Accessibility

ARIA

  • Empty 插图的 aria-hidden 为 true

设计变量

FAQ

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED