组件 / 展示类

Empty

空状态时的展示占位图。

设计文档（新窗口打开）

代码演示

如何引入

import { Empty } from '@chenzy-design/svelte';

基本用法

通过 imageSlot 设置占位图片，可以从 @chenzy-design/illustrations 中手动引入对应的插画（插画默认宽高是 200x200），也可以传入自定义的插画。目前拥有的插画可以查看占位图插画。

内置一系列暗色模式的插画，并支持通过 darkModeImageSlot 传入暗色模式下需要使用的插画，以更好地适配暗色模式。

功能建设中

当前功能暂未开放，敬请期待。

自定义

通过 children 可以实现自定义的描述内容。

空状态标题

开始创建你的第一个仪表盘吧！

也可以不使用图片。

暂未找到匹配的筛选结果
试试 重置筛选条件

不同布局

支持 2 种类型的布局：vertical、horizontal。默认为 vertical。

创建成功

这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。

占位图插画(建设中)

目前 @chenzy-design/illustrations 中支持以下插画。

创建成功
加载失败
没有权限
暂无内容，请添加
页面404
搜索无结果
建设中
神游四方

API 参考

属性说明类型默认值
class类名string-
darkModeImage暗色模式开启后的占位图（SVG 精灵对象或图片 URL），响应 data-theme 属性变化{ id?: string; viewBox?: string; url?: string } | string-
darkModeImageSlot暗色模式自定义插画节点（等价 Semi darkModeImage 传 ReactNode）Snippet-
description内容描述；string 直渲，Snippet 渲染富内容string | Snippet-
image占位图（SVG 精灵对象或图片 URL 字符串）{ id?: string; viewBox?: string; url?: string } | string-
imageSlot自定义插画节点（等价 Semi image 传 ReactNode）Snippet-
imageStyle占位图样式string-
layout布局方式，支持 vertical, horizontalstringvertical
style样式名string-
title标题string-
…rest透传到根节点的其余属性（如 data-*），对齐 Semi getDataAttr(rest)Record<string, unknown>-

Accessibility

ARIA

  • Empty 插图的 aria-hidden 为 true
  • 外部图片 <img> 的 alt 取 description（缺省回退 empty），保证图片可访问名称
  • Empty 本身不可聚焦；内部操作按钮遵循各自原生 Tab 顺序，满足键盘可达性

文案规范

  • 标题
    • 标题应该简洁易懂
  • 正文
    • 可以展示展示空状态的具体原因，也可以展示后续的操作行为去帮助用户消除空状态
    • 不要重复标题上的内容
    • 尽量保持正文在 1-2 句话内
  • 动作按钮
    • 按钮文案需要足够清晰和容易理解
    • 使用 动词 + 名词 的格式

设计变量

变量
默认值
用法
--cd-color-empty-description-text-default var(--cd-color-text-1) 描述文字颜色
显示第 1 条-第 1 条，共 1 条
  • 1