侧边栏 Sheet

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

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

安装


pnpm dlx shadcn@latest add sheet

使用方法

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  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>

无关闭按钮

在 SheetContent 上使用 showCloseButton={false} 来隐藏关闭按钮。

API 参考

请参阅 Radix UI Dialog 文档。

分隔符 Separator 侧边栏 Sidebar

安装使用方法示例侧边位置大小无关闭按钮 API 参考