111k
新建

Empty

PreviousNext

使用 Empty 组件显示空状态。

Radix UIBase 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 组件可以在空状态中显示头像。

LR
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,

RTL

要在 shadcn/ui 中启用 RTL 支持，请参见 RTL 配置指南。

لا توجد مشاريع بعد
لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.
تعرف على المزيد 
"use client"

import * as React from "react"

API 参考

Empty

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

PropTypeDefault
classNamestring
<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

EmptyHeader

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

PropTypeDefault
classNamestring
<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>

EmptyMedia

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

PropTypeDefault
variant"default" | "icon"default
classNamestring
<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>
<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

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

PropTypeDefault
classNamestring
<EmptyTitle>No data</EmptyTitle>

EmptyDescription

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

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

EmptyContent

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

PropTypeDefault
classNamestring
<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>