Empty
区域尚无内容时显示的空状态:黑色斜切凹槽中的标识、斜体标题、一行说明,以及用于添加内容的操作。
安装
# 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.
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 添加虚线描边。