Sheet

从屏幕边缘滑入并贴边停靠的对话框，朝向页面的一侧带墨黑边框。

安装

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/sheet

示例

从右侧、左侧与底部滑入

sheet-sides.tsx

import { Button } from "@/components/zero/button";import { Input } from "@/components/zero/input";import {  Sheet,  SheetBody,  SheetContent,  SheetDescription,  SheetFooter,  SheetHeader,  SheetTitle,  SheetTrigger,} from "@/components/zero/sheet";export default function SheetSides() {  return (    <>      {(["right", "left", "bottom"] as const).map((side) => (        <Sheet key={side}>          <SheetTrigger render={<Button variant="secondary" />}>            From the {side}          </SheetTrigger>          <SheetContent side={side}>            <SheetHeader>              <SheetTitle>Job details</SheetTitle>              <SheetDescription>Rail yards · 3,100 cr</SheetDescription>            </SheetHeader>            <SheetBody>              <p className="text-zero-text-2">                Escort a sealed crate through the yards to the north gate.              </p>              <Input placeholder="A note for the dispatcher" />            </SheetBody>            <SheetFooter>              <Button>Take it</Button>            </SheetFooter>          </SheetContent>        </Sheet>      ))}    </>  );}

行为

滑入使用地基中展开动效的时长，滑出更快；系统开启「减少动态效果」时仅保留淡入淡出。底栏固定在面板末端。

标题栏、标题、描述与正文即 Dialog 的组成部分，以 Sheet 开头的名称重新导出。

属性

SheetContent

属性	类型	默认值	说明
side	"right" \| "left" \| "top" \| "bottom"	"right"	从哪一侧滑入。
showClose	boolean	true	角落的关闭按钮。
closeLabel	string	"Close"	右上角关闭按钮的可访问名称。

另可传入 Base UI Dialog.Popup 的全部属性。