跳到正文

Empty 空状态

Empty 告诉用户列表、表格或面板里暂时没有内容:一个安静的图标、一行文字,有事可做时再加一个操作。

演示

基础用法

不传任何属性时,显示收件箱图标和当前语言的“暂无数据”。

尺寸

size 同时缩放图标和文字,小到下拉菜单里的 tiny,大到整页的 huge。

自定义图标和描述

icon 可以换成任意节点,SVG 会撑满图标区域并沿用它的颜色。description 同样可以是任意节点,比如带一个链接。

标题和操作

title 在描述上方加一行标题,extra 放用户接下来可以做的事。

隐藏图标或描述

showIcon 和 showDescription 分别隐藏图标和描述,适合空间紧凑,或周围文字已经说明情况的时候。

在 Slock 窗口里

Slock 里还没选频道时的会话区:# 图标、标题和一句提示。点左边任意频道,会切换成「频道里还没有消息」的空状态,并带一个开始聊天的操作。

Props

名称类型默认值说明版本
descriptionReactNode语言包 Empty.description图标下方的文字:英文为 “No data”,中文为“暂无数据”。未发布
titleReactNodeundefined描述上方的简短标题。未发布
iconReactNode收件箱图标替换默认图标。图标只起装饰作用,读屏软件会跳过它。未发布
extraReactNodeundefined描述下方的内容,通常是一个操作。未发布
sizetiny | small | medium | large | hugemedium缩放图标和文字。未发布
showIconbooleantrue设为 false 隐藏图标。未发布
showDescriptionbooleantrue设为 false 隐藏描述。未发布

Empty 同样支持原生 div 属性和 ref。ConfigProvider 的 componentOptions.Empty 可以设置默认的 size 和 description,语言包里的 Empty.description 可以改掉内置文字。