组件 · 反馈
Drawer 抽屉
抽屉层：Trigger/Portal/Overlay/Content 与滑动手柄等。
使用建议
- 避免：与 Sheet 无差别混用
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
// …共 11 个导出
} from '@selrux/ui/drawer';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
基础用法
从底部滑出的抽屉，支持拖动关闭。
四个方向
swipeDirection 决定从哪一侧滑出以及拖动关闭的方向——down 底部（默认）、up 顶部、left 左侧、right 右侧。左右方向为全高侧栏，不显示拖动手柄。
尺寸与宽度
Drawer / DrawerContent 的 size（xs–2xl 六档）按字阶缩放字号与内边距；侧栏宽度由 Token --srx-drawer-width（默认 24rem，≥640px 视口生效）控制，可经 styles.popup 覆盖；showSwipeHandle={false} 隐藏底部抽屉的拖动手柄。
受控
open + onOpenChange 由外部状态控制；onOpenChangeComplete 在开关动画结束后触发，可用于重置表单或埋点。
表单
右侧抽屉中编辑表单，底部放主次操作；提交后关闭。Header / Footer 自带内边距，自定义内容区用 --srx-drawer-padding 对齐。
长内容滚动
内容超出视口时面板限高，中间区域滚动，头部与底部操作保持可见。
嵌套抽屉
在抽屉内再打开一个抽屉，父抽屉自动后退缩小（data-nested-drawer-open），关闭子抽屉后恢复。
关闭行为
disablePointerDismissal 禁止点击遮罩关闭（Esc 与按钮仍可关闭）；modal={false} 非模态，不锁滚动、不遮挡页面，可与页面交互；modal="trap-focus" 只困住焦点、不锁页面滚动。
吸附点
snapPoints 设置可停靠的高度（0–1 为视口比例，也可用像素或 'rem' 字符串）；snapPoint / onSnapPointChange 受控当前吸附点，defaultSnapPoint 为非受控初值；snapToSequentialPoints 拖动时逐级吸附、不跳级。
命令式关闭
actionsRef 暴露 close() / unmount()，适合在异步任务完成后由代码关闭抽屉。
自定义手柄与语义样式
showSwipeHandle={false} 后用 DrawerSwipeHandle 自行放置手柄；classNames / styles 按槽位（overlay、popup、header、title、footer、swipeHandle 等）定制；DrawerContent 的 container 可指定挂载点（默认 body）。DrawerContent 已自带 Portal 与遮罩，DrawerPortal / DrawerOverlay 仅在完全自定义结构时单独使用。
API
属性覆盖：示例用到 3 / 3 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
Drawer.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示DrawerContent.container：Portal 挂载目标，默认 body；文档页无需更换挂载点
Drawer
Drawer 根：解析尺寸与语义样式。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
classNames | - | Partial<Record<DrawerSemanticSlot, string>> | - |
styles | - | Partial<Record<DrawerSemanticSlot, CSSProperties>> | - |
showSwipeHandle | 是否在 Content 内渲染拖动手柄。 | boolean | - |
另有 17 项原生属性与事件继承自 ，原样透传。
DrawerClose
Drawer 关闭。
无自有属性；其余 289 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。
DrawerContent
Drawer 内容：默认 Portal + Overlay + 面板（对齐 ui-main DrawerContent）。 进阶场景仍可单独使用 Portal / Overlay。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
container | - | HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null | - |
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。
DrawerDescription
Drawer 说明。
无自有属性；其余 278 项原生属性继承自 HTMLAttributes。
DrawerFooter
Drawer 底部。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
DrawerHeader
Drawer 头部。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
DrawerOverlay
Drawer 遮罩（进阶组合；常规用法由 Content 自动挂载）。
无自有属性；其余 279 项原生属性继承自 HTMLAttributes。
DrawerPortal
Drawer Portal：域镜像 + headless Portal。 常规用法由 Content 自动挂载；进阶组合可单独使用。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
DrawerSwipeHandle
Drawer 拖动手柄。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
DrawerTitle
Drawer 标题。
无自有属性；其余 278 项原生属性继承自 HTMLAttributes。
DrawerTrigger
Drawer 触发器。
无自有属性；其余 291 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。
导出类型：DrawerCloseProps、DrawerContentProps、DrawerDescriptionProps、DrawerFooterProps、DrawerHeaderProps、DrawerOverlayProps、DrawerPortalProps、DrawerProps、DrawerSemanticSlot、DrawerSize、DrawerSnapPoint、DrawerSwipeDirection、DrawerSwipeHandleProps、DrawerTitleProps、DrawerTriggerProps