侧边弹窗 Sheet

Sheet 组件是一个滑动面板组件，用于显示可滑出的内容，通常用于展示侧边栏或临时视图。它可以从页面的四个方向（上、下、左、右）滑出，适用于展示附加信息或操作面板。

---

📦 引入方式

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@npmqg/react-ui-sheet';

---

🧩 使用示例

📚 创建一个简单的 Sheet

示例

源码

<Sheet>
  <SheetTrigger>Open Sheet</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>
    </SheetHeader>
    <SheetDescription>This is the content of the sheet.</SheetDescription>
    <SheetFooter>
      <button>Action</button>
    </SheetFooter>
  </SheetContent>
</Sheet>

📚 自定义打开方向

示例

源码

<Sheet>
  <SheetTrigger>Open Sheet from Left</SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>Left Sheet</SheetTitle>
    </SheetHeader>
    <SheetDescription>This sheet slides in from the left.</SheetDescription>
    <SheetFooter>
      <button>Action</button>
    </SheetFooter>
  </SheetContent>
</Sheet>

---

🧩 组件结构

组件	属性	类型	默认值	说明
Sheet	side	'top' | 'bottom' | 'left' | 'right'	'right'	控制 Sheet 从哪个方向滑出，默认从右侧
	className	string	—	自定义类名，用于扩展组件的样式
SheetContent	side	'top' | 'bottom' | 'left' | 'right'	'right'	控制 Sheet 从哪个方向滑出，默认从右侧
	className	string	—	自定义类名，用于扩展组件的样式
SheetTrigger	className	string	—	自定义类名，用于扩展触发器样式
	children	React.ReactNode	—	触发器的内容，通常是一个按钮或文本
SheetClose	className	string	—	自定义类名，用于扩展关闭按钮样式
	children	React.ReactNode	—	关闭按钮的内容，通常是一个图标或文本
SheetHeader	className	string	—	自定义类名，用于扩展头部样式
	children	React.ReactNode	—	头部内容，通常放置标题或描述信息
SheetFooter	className	string	—	自定义类名，用于扩展底部样式
	children	React.ReactNode	—	底部内容，通常放置操作按钮
SheetTitle	className	string	—	自定义类名，用于扩展标题样式
	children	React.ReactNode	—	标题内容
SheetDescription	className	string	—	自定义类名，用于扩展描述样式
	children	React.ReactNode	—	描述内容

---

🎨 样式说明

• 背景遮罩层 (SheetOverlay)：当 Sheet 打开时，遮罩层将覆盖整个页面并带有透明黑色背景。用户点击遮罩层时会关闭 Sheet。
• 滑动方向：通过 side 属性，你可以控制 Sheet 从顶部、底部、左侧或右侧滑出，默认是从右侧。
• 内容区 (SheetContent)：内容区域包含你要展示的所有信息，可以使用 SheetHeader 和 SheetFooter 来进一步组织内容。
• 关闭按钮：Sheet 提供了一个位于右上角的关闭按钮，点击时可以关闭 Sheet。

---

⚙️ 设计说明

• 动画：Sheet 使用 Radix UI 的过渡动画，确保在打开和关闭时具有平滑的动画效果。
• 响应式设计：Sheet 默认适应不同的屏幕尺寸，并支持自定义最大宽度（如在 left 和 right 方向中可使用 sm:max-w-sm 等配置）。
• 可关闭性：通过 SheetClose 组件可以轻松添加关闭按钮，点击关闭按钮将触发关闭操作。