120k
New

抽屉

PreviousNext

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

Base UIReact AriaRadix UI
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,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
<SheetTrigger>
  <Button>打开</Button>
  <Sheet>
    <SheetHeader>
      <SheetTitle>你确定吗？</SheetTitle>
      <SheetDescription>此操作无法撤销。</SheetDescription>
    </SheetHeader>
  </Sheet>
</SheetTrigger>

组合

使用以下组合来构建一个 Sheet：

SheetTrigger
├── Button
└── Sheet
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    └── SheetFooter

侧边

在 SheetContent 上使用 side 属性来设置面板出现的屏幕边缘。可选值为 top、right、bottom 或 left。

import { Button } from "@/components/ui/button"
import {
  Sheet,

无关闭按钮

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

import { Button } from "@/components/ui/button"
import {
  Sheet,

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import {

API 参考

请参阅 React Aria Modal 文档。