SuperAPI AI 工具集

shadcn-syntax-drawer

通用与其它

查看项目

更新于 10-15 22:18

技能介绍

用途:Drawer 是 shadcn/ui 中移动优先的滑动面板,底层封装 Vaul 库(emilkowalski/vaul),在 Radix Dialog 的可访问性契约之上增加原生手感的拖拽、吸附点与背景缩放。适用于底部抽屉、滑动关闭面板、多档位抽屉等从底部滑入的界面。

主要能力:提供 10 个原语——Drawer(根状态容器,管理 open/onOpenChange/defaultOpen/modal/direction/snapPoints/shouldScaleBackground/dismissible/nested 等)、DrawerTrigger、DrawerPortal、DrawerOverlay、DrawerContent(自动包裹 Portal 与 Overlay,direction=bottom 时自动渲染拖拽手柄)、DrawerHeader、DrawerFooter、DrawerTitle、DrawerDescription、DrawerClose。支持 snapPoints 多档位(如 [0.4, 0.75, 1] 或混合 px 与比例)、shouldScaleBackground 实现 iOS 式背景缩放、nested 嵌套抽屉、handleOnly、closeThreshold 等。

使用方式:从 "@/components/ui/drawer" 导入组件,用 Drawer 包裹 DrawerTrigger 与 DrawerContent,在 Content 内放置 Header/Footer/Title/Description/Close。受控时同时传 open 与 onOpenChange;非受控用 defaultOpen。吸附点需升序排列,首个吸附点至少与 Header 等高。

限制:必须提供 DrawerTitle,否则触发开发警告与 axe-core 严重问题;drawer.tsx 顶部必须保留 "use client";DrawerContent 应直接渲染,不要手动包裹 Portal/Overlay;桌面侧边面板应改用 Sheet,居中模态用 Dialog;shouldScaleBackground 需要 data-vaul-drawer-wrapper 包裹元素才生效。具体安装命令与版本信息暂未提供。