侧边栏 (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>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

示例

侧边方向

在 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 { Button } from "@/examples/radix/ui-rtl/button"

API 参考

查看 Radix UI Dialog 文档。

分隔符侧边栏

本页内容

安装用法示例方位 (Side)隐藏关闭按钮从右至左 (RTL)API 参考

在 Vercel 上部署你的 shadcn/ui 应用

OpenAI、Sonos、Adobe 等公司的信任之选。

Vercel 提供工具和基础设施，以规模化部署应用和功能。