111k
新建

Sheet

PreviousNext

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

Radix UIBase UI
Radix 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,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

示例

方向

使用 SheetContent 上的 side 属性可以设置 sheet 出现的屏幕边缘。可选值为 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 { Button } from "@/examples/radix/ui-rtl/button"

API 参考

请参见 Radix UI Dialog 文档。