Docs
抽屉

抽屉

扩展 Dialog 组件，以显示补充屏幕主要内容的内容。

DocsAPI Reference

安装

npx shadcn-ui@latest add sheet

用法

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
<Sheet>
  <SheetTrigger>打开</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>你绝对确定吗？</SheetTitle>
      <SheetDescription>
        这个操作无法撤消。这个操作会永久删除你的账户，并且把你的数据从服务器移除。
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

示例

侧边栏

使用 <SheetContent /> 中的 side 属性来指明该组件将在屏幕的哪一侧出现。其值可以是 top、right、bottom 或 left。

尺寸

你可以通过 CSS 类调整抽屉的大小：

<Sheet>
  <SheetTrigger>打开</SheetTrigger>
  <SheetContent className="w-[400px] sm:w-[540px]">
    <SheetHeader>
      <SheetTitle>你绝对确定吗？</SheetTitle>
      <SheetDescription>
        这个操作无法撤消。这个操作会永久删除你的账户，并且把你的数据从服务器移除。
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>