Empty 设计文档

空状态占位。镜像 Semi Design:image / darkModeImage 接受插画节点(imageSlot)、SVG 精灵对象 { id, viewBox, url } 或图片 URL 字符串;darkModeImage 存在时监听 data-theme 在暗色下切换插画;title 用 Typography.Title(有图 heading=4,无图 heading=6+字重 400);description 为 div;layout 支持 vertical / horizontal。插画由独立 illustrations 资产提供(对齐 @douyinfe/semi-illustrations)。

← API 文档

使用建议

空状态占位。镜像 Semi Design:image / darkModeImage 接受插画节点(imageSlot)、SVG 精灵对象 { id, viewBox, url } 或图片 URL 字符串;darkModeImage 存在时监听 data-theme 在暗色下切换插画;title 用 Typography.Title(有图 heading=4,无图 heading=6+字重 400);description 为 div;layout 支持 vertical / horizontal。插画由独立 illustrations 资产提供(对齐 @douyinfe/semi-illustrations)。

Accessibility

ARIA role:none

  • 插画 SVG aria-hidden=true
  • 外部图片 <img> 带 alt(取 description,缺省 "empty")
  • 标题与描述为可读文本

设计变量

变量默认值用法
--cd-color-empty-description-text-default var(--cd-color-text-1)描述文字颜色