空

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

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add empty
Copy

用法

🌐 Usage

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

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

示例

🌐 Examples

大纲

🌐 Outline

使用 border 工具类创建轮廓空状态。

🌐 Use the border utility class to create an outline empty state.

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

背景

🌐 Background

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

🌐 Use the bg-* and bg-gradient-* utilities to add a background to the empty state.

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

头像

🌐 Avatar

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

🌐 Use the EmptyMedia component to display an avatar in the empty state.

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

阿凡达集团

🌐 Avatar Group

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

🌐 Use the EmptyMedia component to display an avatar group in the empty state.

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

InputGroup

你可以将 InputGroup 组件添加到 EmptyContent 组件中。

🌐 You can add an InputGroup component to the EmptyContent component.

import {
  Empty,
  EmptyContent,

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

空

🌐 Empty

空状态的主要组件。封装 EmptyHeader 和 EmptyContent 组件。

🌐 The main component of the empty state. Wraps the EmptyHeader and EmptyContent components.

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

EmptyHeader

EmptyHeader 组件封装了空的媒体、标题和描述。

🌐 The EmptyHeader component wraps the empty media, title, and description.

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

EmptyMedia

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

🌐 Use the EmptyMedia component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.

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

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

EmptyTitle

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

🌐 Use the EmptyTitle component to display the title of the empty state.

Copy<EmptyTitle>No data</EmptyTitle>

EmptyDescription

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

🌐 Use the EmptyDescription component to display the description of the empty state.

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

EmptyContent

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

🌐 Use the EmptyContent component to display the content of the empty state such as a button, input or a link.

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