Components
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
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 {输入组
您可以将 InputGroup 组件添加到 EmptyContent 组件中。
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>