工作表

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

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add sheet
Copy

用法

🌐 Usage

Copyimport {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

Copy<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

示例

🌐 Examples

侧面

🌐 Side

在 SheetContent 上使用 side 属性来设置工作表出现的屏幕边缘。值可以是 top、right、bottom 或 left。

🌐 Use the side prop on SheetContent to set the edge of the screen where the sheet appears. Values are top, right, bottom, or left.

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

没有关闭按钮

🌐 No Close Button

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

🌐 Use showCloseButton={false} on SheetContent to hide the close button.

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

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import { Button } from "@/examples/base/ui-rtl/button"

API参考

🌐 API Reference

查看 Base UI Dialog 文档。

🌐 See the Base UI Dialog documentation.