zzzUI

Empty

区域尚无内容时显示的空状态:黑色斜切凹槽中的标识、斜体标题、一行说明,以及用于添加内容的操作。

安装

terminal
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/empty

示例

没有委托的区域

No jobs in this district

The dispatcher posts new jobs at the top of every hour.

empty-board.tsx
import { Button } from "@/components/zero/button";import {  Empty,  EmptyContent,  EmptyDescription,  EmptyHeader,  EmptyMedia,  EmptyTitle,} from "@/components/zero/empty";import { SearchIcon } from "@/components/zero/icons";export default function EmptyBoard() {  return (    <Empty className="border-(length:--zero-stroke-thin) border-zero-line border-dashed">      <EmptyHeader>        <EmptyMedia>          <SearchIcon />        </EmptyMedia>        <EmptyTitle>No jobs in this district</EmptyTitle>        <EmptyDescription>          The dispatcher posts new jobs at the top of every hour.        </EmptyDescription>      </EmptyHeader>      <EmptyContent>        <Button>Show every district</Button>        <Button variant="ghost">Clear the filters</Button>      </EmptyContent>    </Empty>  );}

行为

在给定的空间内居中显示。用作拖放区域或空槽位时,可通过 className 添加虚线描边。

属性

Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent