AEmpty
AEmpty is an empty-state placeholder — an icon with optional caption text. Use it when a list, table, or search has no results. The default slot renders below the text and is meant for action buttons.
Import
import { Empty } from '@any-design/anyui/vue';
// React: import { Empty } from '@any-design/anyui/react';
// Svelte: import { Empty } from '@any-design/anyui/svelte';Basic usage
<template>
<AEmpty text="No results found" />
</template>Examples
Custom icon
Pass an Iconify icon name to icon.
<template>
<AEmpty text="Inbox is empty" icon="ri:inbox-line" />
</template>With an action
Put a button in the default slot to give the user a next step.
<template>
<AEmpty text="No projects yet">
<AButton type="primary">Create project</AButton>
</AEmpty>
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text |
String | undefined | Optional caption. |
icon |
String | IconifyIcon | ‘iconoir:file-not-found’ | Icon above the text. |
Slots
| Slot | Props | Description |
|---|---|---|
default |
— | Action area below the text. |
AEmpty
AEmpty 是空状态占位组件 —— 一个图标加可选说明文字。当列表、表格或搜索无结果时使用。默认插槽渲染在文字下方，用于放置操作按钮。
引入
import { Empty } from '@any-design/anyui/vue';
// React: import { Empty } from '@any-design/anyui/react';
// Svelte: import { Empty } from '@any-design/anyui/svelte';基础用法
<template>
<AEmpty text="暂无结果" />
</template>示例
自定义图标
向 icon 传入 Iconify 图标名。
<template>
<AEmpty text="收件箱为空" icon="ri:inbox-line" />
</template>带操作
在默认插槽中放一个按钮，给用户下一步的入口。
<template>
<AEmpty text="还没有项目">
<AButton type="primary">创建项目</AButton>
</AEmpty>
</template>属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
text |
String | undefined | 可选说明文本。 |
icon |
String | IconifyIcon | ‘iconoir:file-not-found’ | 文字上方的图标。 |
插槽
| 插槽 | 作用域参数 | 说明 |
|---|---|---|
default |
— | 文字下方的操作区。 |