Sheet.tsx

Sheet.tsx

基本信息

  • 类型: React 组件 (shadcn/ui)
  • 路径: ./src/components/ui/sheet.tsx

功能描述

侧滑面板组件，从屏幕边缘滑出的面板。支持四个方向（上/下/左/右），适用于移动端导航或详情展示。

导出内容

  • Sheet - 面板根组件
  • SheetTrigger - 触发器
  • SheetClose - 关闭按钮
  • SheetContent - 内容容器
  • SheetHeader - 头部区域
  • SheetFooter - 底部区域
  • SheetTitle - 标题
  • SheetDescription - 描述
  • SheetPortal - 门户
  • SheetOverlay - 遮罩层

Props 接口

Sheet

属性类型必填默认值说明
openboolean否-是否打开
onOpenChange(open: boolean) => void否-状态变化回调
...propsReact.ComponentProps<typeof SheetPrimitive.Root>否-Radix Dialog 属性

SheetContent

属性类型必填默认值说明
side`'top' \'right' \'bottom' \'left'`否'right'滑出方向
classNamestring否-自定义CSS类名
...propsReact.ComponentProps<typeof SheetPrimitive.Content>否-Content属性

SheetHeader / SheetFooter / SheetTitle / SheetDescription

属性类型必填默认值说明
classNamestring否-自定义CSS类名
...props对应组件属性否-其他属性

依赖

  • @radix-ui/react-dialog - Radix UI 对话框原语
  • lucide-react - 图标库 (XIcon)
  • @/lib/utils - 工具函数 (cn)

使用示例

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";

// 右侧滑出（默认）
<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">打开面板</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>编辑个人资料</SheetTitle>
      <SheetDescription>
        在此处更改您的个人资料信息。
      </SheetDescription>
    </SheetHeader>
    <div className="py-4">
      {/* 表单内容 */}
    </div>
  </SheetContent>
</Sheet>

// 左侧滑出
<Sheet>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>导航菜单</SheetTitle>
    </SheetHeader>
    {/* 导航内容 */}
  </SheetContent>
</Sheet>

// 底部滑出（移动端常用）
<Sheet>
  <SheetContent side="bottom">
    <SheetHeader>
      <SheetTitle>选项</SheetTitle>
    </SheetHeader>
    {/* 选项内容 */}
  </SheetContent>
</Sheet>
← 返回目录