Empty 空状态
Empty 告诉用户列表、表格或面板里暂时没有内容:一个安静的图标、一行文字,有事可做时再加一个操作。
演示
基础用法
不传任何属性时,显示收件箱图标和当前语言的“暂无数据”。
尺寸
size 同时缩放图标和文字,小到下拉菜单里的 tiny,大到整页的 huge。
自定义图标和描述
icon 可以换成任意节点,SVG 会撑满图标区域并沿用它的颜色。description 同样可以是任意节点,比如带一个链接。
标题和操作
title 在描述上方加一行标题,extra 放用户接下来可以做的事。
隐藏图标或描述
showIcon 和 showDescription 分别隐藏图标和描述,适合空间紧凑,或周围文字已经说明情况的时候。
在 Slock 窗口里
Slock 里还没选频道时的会话区:# 图标、标题和一句提示。点左边任意频道,会切换成「频道里还没有消息」的空状态,并带一个开始聊天的操作。
Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
description | ReactNode | 语言包 Empty.description | 图标下方的文字:英文为 “No data”,中文为“暂无数据”。 | 未发布 |
title | ReactNode | undefined | 描述上方的简短标题。 | 未发布 |
icon | ReactNode | 收件箱图标 | 替换默认图标。图标只起装饰作用,读屏软件会跳过它。 | 未发布 |
extra | ReactNode | undefined | 描述下方的内容,通常是一个操作。 | 未发布 |
size | tiny | small | medium | large | huge | medium | 缩放图标和文字。 | 未发布 |
showIcon | boolean | true | 设为 false 隐藏图标。 | 未发布 |
showDescription | boolean | true | 设为 false 隐藏描述。 | 未发布 |
Empty 同样支持原生 div 属性和 ref。ConfigProvider 的 componentOptions.Empty 可以设置默认的 size 和 description,语言包里的 Empty.description 可以改掉内置文字。