组件 · 反馈 · 原生 HTML 与 React
空状态 Empty
还没有内容时:说明为什么空、下一步做什么。
演示
还没有记录
还没有插件
用一行命令新建一个。
pnpm xxd new ~/js/插件-今日待办还没有记录
写入 X 的文章会出现在这里。
<div class="xxd-empty" data-size="sm"><i data-xxd-icon="FileText"></i><p class="xxd-empty__title">还没有记录</p></div>
<div class="xxd-empty"><i data-xxd-icon="Package"></i><p class="xxd-empty__title">还没有插件</p><p class="xxd-empty__text">用一行命令新建一个。</p><div class="xxd-clipboard" data-size="sm"><code>pnpm xxd new ~/js/插件-今日待办</code><button class="xxd-btn" data-variant="ghost" data-icon-only data-size="xs" aria-label="复制" data-copy="pnpm xxd new ~/js/插件-今日待办"><i data-xxd-icon="Copy" data-size="14"></i></button></div></div>export function EmptyDemo() {
return <Empty title="还没有记录" description="写入 X 的文章会出现在这里。" />;
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| data-size | sm | lg |
| 类名 | xxd-empty xxd-empty__title xxd-empty__text xxd-empty__actions |
键盘与读屏
- 图标是装饰(aria-hidden);标题写事实,正文写下一步
- 下一步是按钮或链接,键盘可达
规则
- 说明 + 一个明确的下一步