章节

立即开始

安装

夜间模式

表单

注册表

空

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

No Projects Yet

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

Learn More

<script setup lang="ts">
import { ArrowUpRightIcon, FolderCode } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty'
</script>

<template>
  <Empty>
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <FolderCode />
      </EmptyMedia>
      <EmptyTitle>No Projects Yet</EmptyTitle>
      <EmptyDescription>
        You haven't created any projects yet. Get started by creating your first
        project.
      </EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <div class="flex gap-2">
        <Button>Create Project</Button>
        <Button variant="outline">
          Import Project
        </Button>
      </div>
    </EmptyContent>
    <Button variant="link" as-child class="text-muted-foreground" size="sm">
      <a href="#">
        Learn More <ArrowUpRightIcon />
      </a>
    </Button>
  </Empty>
</template>

安装

🌐 Installation


pnpm dlx shadcn-vue@latest add empty

背景

🌐 Background

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

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

No Notifications

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

<script setup lang="ts">
import { Bell, RefreshCcw } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty'
</script>

<template>
  <Empty class="from-muted/50 to-background h-full bg-gradient-to-b from-30%">
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <Bell />
      </EmptyMedia>
      <EmptyTitle>No Notifications</EmptyTitle>
      <EmptyDescription>
        You're all caught up. New notifications will appear here.
      </EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <Button variant="outline" size="sm">
        <RefreshCcw />
        Refresh
      </Button>
    </EmptyContent>
  </Empty>
</template>

头像

🌐 Avatar

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

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

User Offline

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

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty'
</script>

<template>
  <Empty>
    <EmptyHeader>
      <EmptyMedia variant="default">
        <Avatar class="size-12">
          <AvatarImage
            src="https://github.com/zernonia.png"
            class="grayscale"
          />
          <AvatarFallback>ZN</AvatarFallback>
        </Avatar>
      </EmptyMedia>
      <EmptyTitle>User Offline</EmptyTitle>
      <EmptyDescription>
        This user is currently offline. You can leave a message to notify them
        or try again later.
      </EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <Button size="sm">
        Leave Message
      </Button>
    </EmptyContent>
  </Empty>
</template>

阿凡达集团

🌐 Avatar Group

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

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

AASBZN

No Team Members

Invite your team to collaborate on this project.

<script setup lang="ts">
import { Plus } from 'lucide-vue-next'
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty'
</script>

<template>
  <Empty>
    <EmptyHeader>
      <EmptyMedia variant="default">
        <div class="*:ring-background flex -space-x-2 *:size-12 *:ring-2 *:grayscale">
          <Avatar>
            <AvatarImage
              src="https://github.com/ace-of-aces.png"
              alt="@ace-of-aces"
            />
            <AvatarFallback>AA</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarImage
              src="https://github.com/sadeghbarati.png"
              alt="@sadeghbarati"
            />
            <AvatarFallback>SB</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarImage
              src="https://github.com/zernonia.png"
              alt="@zernonia"
            />
            <AvatarFallback>ZN</AvatarFallback>
          </Avatar>
        </div>
      </EmptyMedia>
      <EmptyTitle>No Team Members</EmptyTitle>
      <EmptyDescription>
        Invite your team to collaborate on this project.
      </EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <Button size="sm">
        <Plus />
        Invite Members
      </Button>
    </EmptyContent>
  </Empty>
</template>

InputGroup

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

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

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

<script setup lang="ts">
import { SearchIcon } from 'lucide-vue-next'
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from '@/components/ui/empty'
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@/components/ui/input-group'
import { Kbd } from '@/components/ui/kbd'
</script>

<template>
  <Empty>
    <EmptyHeader>
      <EmptyTitle>404 - Not Found</EmptyTitle>
      <EmptyDescription>
        The page you're looking for doesn't exist. Try searching for what you
        need below.
      </EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <InputGroup class="sm:w-3/4">
        <InputGroupInput placeholder="Try searching for pages..." />
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <Kbd>/</Kbd>
        </InputGroupAddon>
      </InputGroup>
      <EmptyDescription>
        Need help? <a href="#">Contact support</a>
      </EmptyDescription>
    </EmptyContent>
  </Empty>
</template>

API参考

🌐 API Reference

空

🌐 Empty

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

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

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

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

EmptyHeader

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

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

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

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

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.

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

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

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

EmptyTitle

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

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

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

<template>
  <EmptyTitle>No data</EmptyTitle>
</template>

EmptyDescription

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

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

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

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

EmptyContent

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

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

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

<template>
  <EmptyContent>
    <Button>Add Project</Button>
  </EmptyContent>
</template>

下拉菜单字段

On This Page

安装背景头像阿凡达集团 InputGroup API参考空 EmptyHeader EmptyMedia EmptyTitle EmptyDescription EmptyContent