安装
使用方法
<script setup lang="ts">
import { FolderOpen } from 'lucide-vue-next'
import { Button } from '@/registry/default/ui/button'
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from '@/registry/default/ui/empty'
</script>
<template>
<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<FolderOpen />
</EmptyMedia>
</EmptyHeader>
<EmptyTitle>No data</EmptyTitle>
<EmptyDescription>No data found</EmptyDescription>
<EmptyContent>
<Button>Add data</Button>
</EmptyContent>
</Empty>
</template>示例
大纲
使用 border 工具类来创建轮廓样式的空状态。
云存储为空
上传文件到云存储，以便随时随地访问。
背景
使用 bg-* 和 bg-gradient-* 工具类为该空状态添加背景。
没有通知
您已处理完所有内容。新的通知将出现在这里。
头像
使用 EmptyMedia 组件在空状态中展示头像。
ZN
用户不在线
该用户当前不在线。您可以留言通知他们，或者稍后再试。
头像组
使用 EmptyMedia 组件在空状态中展示头像组。
AASBZN
暂无团队成员
邀请您的团队成员共同参与该项目。
输入组
您可以将 InputGroup 组件添加到 EmptyContent 组件中。
404 - 未找到页面
您查找的页面不存在。请尝试在下方搜索您需要的内容。
需要帮助？ 联系支持
API 参考
空状态
空状态的主要组件。包裹了 EmptyHeader 和 EmptyContent 组件。
<template>
<Empty>
<EmptyHeader />
<EmptyContent />
</Empty>
</template>EmptyHeader
EmptyHeader 组件用于包裹空状态的媒体内容、标题和描述。
<template>
<EmptyHeader>
<EmptyMedia />
<EmptyTitle />
<EmptyDescription />
</EmptyHeader>
</template>EmptyMedia
使用 EmptyMedia 组件来显示空状态的媒体，如图标或图片。您也可以用它来显示其他组件，例如头像。
<template>
<EmptyMedia variant="icon">
<Icon />
</EmptyMedia>
</template><template>
<EmptyMedia>
<Avatar>
<AvatarImage src="..." />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</EmptyMedia>
</template>EmptyTitle
使用 EmptyTitle 组件来显示空状态的标题。
<template>
<EmptyTitle>No data</EmptyTitle>
</template>EmptyDescription
使用 EmptyDescription 组件来显示空状态的描述。
<template>
<EmptyDescription>You do not have any notifications.</EmptyDescription>
</template>EmptyContent
使用 EmptyContent 组件来显示空状态的内容，例如按钮、输入框或链接。
<template>
<EmptyContent>
<Button>Add Project</Button>
</EmptyContent>
</template>