介绍

开始使用

表单

注册表

Empty

使用 Empty 组件来显示空状态。

Radix UI Base UI

No Projects Yet

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

Learn More

import { Button } from "@/components/ui/button"
import {
  Empty,

安装


pnpm dlx shadcn@latest add empty

使用方法

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
    <EmptyTitle>暂无数据</EmptyTitle>
    <EmptyDescription>未找到数据</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>添加数据</Button>
  </EmptyContent>
</Empty>

示例

边框样式

使用 border 工具类创建一个带边框的空状态。

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

import { Button } from "@/components/ui/button"
import {
  Empty,

背景

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

No Notifications

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

import { Button } from "@/components/ui/button"
import {
  Empty,

头像

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

User Offline

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

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

头像组

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

CNLRER

No Team Members

Invite your team to collaborate on this project.

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

输入组

你可以在 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

import {
  Empty,
  EmptyContent,

API 参考

Empty

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

属性	类型	默认值
`className`	`string`

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

EmptyHeader

EmptyHeader 组件包裹空状态中的媒体、标题和描述。

属性	类型	默认值
`className`	`string`

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

EmptyMedia

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

属性	类型	默认值
`variant`	`"default" \| "icon"`	`default`
`className`	`string`

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

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

EmptyTitle

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

属性	类型	默认值
`className`	`string`

<EmptyTitle>暂无数据</EmptyTitle>

EmptyDescription

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

属性	类型	默认值
`className`	`string`

<EmptyDescription>您还没有任何通知。</EmptyDescription>

EmptyContent

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

属性	类型	默认值
`className`	`string`

<EmptyContent>
  <Button>添加项目</Button>
</EmptyContent>

下拉菜单字段

安装使用方法示例边框样式背景头像头像组输入组 API 参考 Empty EmptyHeader EmptyMedia EmptyTitle EmptyDescription EmptyContent