No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

Learn More

安装

pnpm dlx shadcn-vue@latest add empty

用法

<script setup lang="ts">
import { FolderOpen } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty'
</script>

<template>
  <Empty>
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <FolderOpen />
      </EmptyMedia>
      <EmptyTitle>No data</EmptyTitle>
      <EmptyDescription>No data found</EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <Button>Add data</Button>
    </EmptyContent>
  </Empty>
</template>

示例

边框

使用 border 工具类来创建一个描边空状态。

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

背景

使用 bg-* 和 bg-gradient-* 工具类为空状态添加背景。

No Notifications

You're all caught up. New notifications will appear here.

头像

使用 EmptyMedia 组件在空状态中显示头像。

ZN

User Offline

This user is currently offline. You can leave a message to notify them or try again later.

头像组

使用 EmptyMedia 组件在空状态中显示头像组。

AASBZN

No Team Members

Invite your team to collaborate on this project.

输入组

您可以在 EmptyContent 组件中添加一个 InputGroup 组件。

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

API 参考

Empty

空状态的主组件。包裹了 EmptyHeader 和 EmptyContent 组件。

属性	类型	默认值
class	string

<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

EmptyHeader

EmptyHeader 组件包裹空状态图像、标题和描述。

属性	类型	默认值
class	string

<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>

EmptyMedia

使用 EmptyMedia 组件显示空状态的媒体，例如图标或图片。您也可以用它来显示其他组件，如头像。

属性	类型	默认值
variant	"default" | "icon"	default
class	string

<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>

<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

使用 EmptyTitle 组件显示空状态的标题。

属性	类型	默认值
class	string

<EmptyTitle>
No data
</EmptyTitle>

EmptyDescription

使用 EmptyDescription 组件显示空状态的描述。

属性	类型	默认值
class	string

<EmptyDescription>
You do not have any notifications.
</EmptyDescription>

EmptyContent

使用 EmptyContent 组件显示空状态的内容，例如按钮、输入框或链接。

属性	类型	默认值
class	string

<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>