组件 · 反馈

Sheet 侧边面板

侧滑/底部滑入面板，含 Trigger/Content/Header 等槽位。

入口 @selrux/ui/sheet · 源码 src/components/sheet/index.ts · 11 个组件 · 发布状态 preview

使用建议

避免：与 Drawer 无差别混用而不看交互差异
限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx

123456789import {
  Sheet,
  SheetBackdrop,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  // …共 11 个导出
} from '@selrux/ui/sheet';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

基础用法

从侧边滑出的面板，适合详情与编辑。

方向

SheetContent 的 side 为 top / bottom / left / right。

尺寸与触发渲染

Sheet / SheetContent 的 size；SheetTrigger、SheetClose 用 render 渲染为 Button；showCloseButton={false} 去掉右上角关闭钮。

关闭策略

closeOnEscape / closeOnOutsidePress 控制关闭方式；beforeClose 返回 false 拦截；onOpenChange 接收变更；defaultOpen 为非受控初始值。

状态：关闭

API

属性覆盖：示例用到 11 / 13 个自有属性（84.6%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

Sheet.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示
SheetContent.container：Portal 挂载目标，默认 body；文档页无需更换挂载点
SheetPortal.container：Portal 挂载目标，默认 body；文档页无需更换挂载点

Sheet

Sheet 根：解析尺寸、贴边开关与语义样式，无布局 DOM。

属性	说明	类型	默认值
`size`	-	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-
`flush`	是否贴视口边缘。默认 false：与 Dialog 同值的视口间隙（`--srx-sheet-viewport-gap`）；true 时满边贴合。	`boolean`	-
`classNames`	-	`Partial<Record<SheetSemanticSlot, string>>`	-
`styles`	-	`Partial<Record<SheetSemanticSlot, CSSProperties>>`	-
`defaultOpen`	-	`boolean`	-
`onOpenChange`	-	`((open: boolean, details: OverlayChangeDetails) => void)`	-
`closeOnEscape`	-	`boolean`	-
`closeOnOutsidePress`	默认 true：侧栏常见。	`boolean`	-
`beforeClose`	-	`((details: OverlayChangeDetails) => boolean \| void \| Promise<boolean \| void>)`	-

另有 3 项原生属性与事件继承自，原样透传。

SheetBackdrop

Sheet 遮罩（进阶组合；常规用法由 Content 自动挂载）。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

SheetBody

Sheet 可滚动正文。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

SheetClose

Sheet 关闭。

属性	说明	类型	默认值
`render`	-	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-

另有 290 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。

SheetContent

Sheet 内容：默认 Portal + Backdrop + 面板（对齐 shadcn SheetContent）。进阶场景仍可单独使用 Portal / Backdrop。

属性	说明	类型	默认值
`size`	-	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-
`flush`	是否贴视口边缘；省略时继承 Root。默认 false：留 `--srx-sheet-viewport-gap`（与 Dialog 一致为 1rem）。	`boolean`	-
`container`	-	`PortalContainerInput`	-
`side`	-	`"top" \| "bottom" \| "left" \| "right"`	-
`showCloseButton`	-	`boolean`	-

另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。

SheetDescription

Sheet 说明。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

SheetFooter

Sheet 底部。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

SheetHeader

Sheet 头部。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

SheetPortal

Sheet Portal：域镜像 + headless Portal。常规用法由 Content 自动挂载；进阶组合可单独使用。

属性	说明	类型	默认值
`container`	-	`PortalContainerInput`	-

另有 1 项原生属性与事件继承自，原样透传。

SheetTitle

Sheet 标题。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

SheetTrigger

Sheet 触发器。

属性	说明	类型	默认值
`render`	-	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-

另有 290 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。

导出类型：OverlayChangeDetails、SheetBackdropProps、SheetBodyProps、SheetCloseProps、SheetContentProps、SheetDescriptionProps、SheetFooterProps、SheetHeaderProps、SheetPortalProps、SheetProps、SheetSemanticSlot、SheetSide、SheetSize、SheetTitleProps、SheetTriggerProps