ElyriEmpty
空状态：内置三款随主题变色的插画，可带标题、描述与操作，也可替换为自定义图像。
安装
添加组件
pnpm dlx @elyri/cli@latest add empty示例
基础用法
标题 + 描述 + 操作，适合列表、表格、卡片无数据时。
No projects yet
Projects you create will show up here.
import { Button } from './components/elyri/Button';
import { Empty } from './components/elyri/Empty';
export function Example() {
return (
<Empty title="No projects yet" action={<Button size="sm">Create project</Button>}>
Projects you create will show up here.
</Empty>
);
}内置插画
default / search / inbox 三款，配色全部取自主题变量。
No documents
No results
Inbox zero
import { Empty } from './components/elyri/Empty';
export function Example() {
return (
<div className="demo-ui-grid">
<Empty size="sm" title="No documents" />
<Empty size="sm" variant="search" title="No results" />
<Empty size="sm" variant="inbox" title="Inbox zero" />
</div>
);
}尺寸
sm / md / lg 三档，插画与文字同步缩放。
Small
Medium
Large
import { Empty } from './components/elyri/Empty';
export function Example() {
return (
<div className="demo-ui-row">
<Empty size="sm" title="Small" />
<Empty size="md" title="Medium" />
<Empty size="lg" title="Large" />
</div>
);
}自定义图像
通过 image 替换插画，传 null 则只保留文字。
All clear
Nothing left to review.
No activity
Recent changes will appear here.
import { Empty } from './components/elyri/Empty';
const checkIcon = (
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="9" />
<path d="m8 12.5 2.5 2.5L16 9.5" />
</svg>
);
export function Example() {
return (
<div className="demo-ui-row">
<Empty image={checkIcon} title="All clear">
Nothing left to review.
</Empty>
<Empty image={null} title="No activity">
Recent changes will appear here.
</Empty>
</div>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | 'default' | 'search' | 'inbox' | 'default' | 内置插画：default / search / inbox |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸：sm / md / lg |
image | ReactNode | — | 自定义插画，覆盖内置插画；传 null 隐藏 |
title | ReactNode | — | 标题 |
action | ReactNode | — | 底部操作区 |
children | ReactNode | — | 描述文字 |
...rest | HTMLAttributes | — | 其余属性透传给原生 div |