仅桌面端保证样式
Empty 空状态
列表、表格、搜索结果等场景无数据时的占位提示。内置默认插画为主题变量驱动的 SVG(自动适配主题与暗色模式)与「暂无数据」文案,可自定义插画尺寸、描述文案,或通过插槽整体替换插画与描述,并在底部放置操作按钮引导下一步。
基础用法
不传任何属性即为最简形态:内置插画 + 「暂无数据」。
暂无数据
自定义描述
description 指定占位文案,说明「为什么为空」比通用文案更有引导性。
筛选条件下没有匹配的数据
带操作的空状态
向默认插槽放置按钮即可引导用户进行下一步;只有提供插槽内容时才渲染底部操作区。
还没有项目,创建第一个吧
自定义插画尺寸
image-size 调整插画容器宽度(px),大尺寸适合整页空态,小尺寸适合卡片、弹窗内的局部空态。
没有找到相关订单,换个关键词试试
自定义插画
#image 插槽整体替换插画区域,可放置图标、SVG 或业务插画组件。
没有找到相关结果
自定义描述插槽
#description 插槽可插入链接、按钮等富文本,把「解决入口」直接放在文案里。
没有权限访问该空间,申请开通
组合操作区
默认插槽与 #description 插槽可以同时使用:描述给原因、操作区给动作,支持多个按钮并排。
工单已全部处理完成
组合表格空态
作为 Table 等列表类组件的 #empty 插槽使用,统一各处空态风格(Table 的空态插槽见 table.md)。
本月暂无账单
API
Empty Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| image | 图片地址(预留属性,当前版本自定义插画请用 image 插槽) | string | |
| imageSize | 插画容器宽度(px) | number | 80 |
| description | 描述文案(优先级低于 description 插槽) | string | 暂无数据 |
Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 底部操作区(提供内容时才渲染) | — | — |
| image | 自定义插画 | — | — |
| description | 自定义描述文案(可含链接等富文本) | — | — |