109k
新建

空状态

上一页下一页

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

Radix UIBase UI
Radix UI - shadcn/ui 组件库
暂无项目
您尚未创建任何项目。从创建您的第一个项目开始吧。
了解更多
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>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>

示例

大纲

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

云存储为空
将文件上传至您的云存储，以便随时随地访问。
import { Button } from "@/components/ui/button"
import {
  Empty,

背景

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

暂无通知
您已处理完所有内容。新的通知将会出现在这里。
import { Button } from "@/components/ui/button"
import {
  Empty,

头像

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

LR
用户离线
该用户目前处于离线状态。您可以留言通知他们，或稍后再试。
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

头像组

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

CNLRER
暂无团队成员
邀请您的团队成员共同协作此项目。
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

InputGroup

您可以向 EmptyContent 组件中添加 InputGroup 组件。

404 - 找不到页面
您查找的页面不存在。尝试在下方搜索您需要的内容。
/
需要帮助？ 联系支持
import {
  Empty,
  EmptyContent,

RTL (从右至左)

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

لا توجد مشاريع بعد (暂无项目)
لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول. (您尚未创建任何项目。开始创建您的第一个项目。)
تعرف على المزيد (了解更多) 
"use client"

import * as React from "react"

API 参考

空状态

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

属性类型默认
classNamestring
<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

EmptyHeader

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

属性类型默认
classNamestring
<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>

EmptyMedia

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

属性类型默认
variant (变体)"default" | "icon"default
classNamestring
<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>
<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

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

属性类型默认
classNamestring
<EmptyTitle>No data</EmptyTitle>

EmptyDescription

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

属性类型默认
classNamestring
<EmptyDescription>You do not have any notifications.</EmptyDescription>

EmptyContent

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

属性类型默认
classNamestring
<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>