空状态 Empty
指当前场景没有对应的数据内容,呈现出的一种状态。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css,用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter,否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基本用法:
Empty空状态组件的基础用法。 - 自定义图标和文案:可以通过
icon参数传入自定义图标,description修改显示文案。 - 自定义图片:可以通过
imgSrc参数传入图片 Url。
示例来自 Arco Design 官方仓库(MIT),固定在 npm 2.66.18 对应的提交;部分示例使用在线图片或上传地址,预览中网络请求被禁用。
API
Empty
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| imgSrc | 将图标替换为图片 | string | - |
| description | 显示文案 | ReactNode | - |
| icon | 自定义显示图案 | ReactNode | - |
| className | 节点类名 | string | string[] | - |
| style | 节点样式 | CSSProperties | - |