SuperAPI AI 工具集

modal-drawer-system

编程与开发

查看项目

更新于 10-16 03:16

技能介绍

用途:生成无障碍、体验完善的模态对话框与抽屉组件,适用于 React 项目中的弹窗、侧边栏和底部面板场景。

主要能力:支持三种类型——居中模态框(Modal)、侧边抽屉(Drawer,左/右/底部)和底部面板(Bottom Sheet)。核心特性包括:通过 createPortal 在 DOM 层级外渲染;焦点陷阱与关闭后焦点恢复;ESC 键关闭;打开时锁定 body 滚动;点击背景关闭;ARIA 属性(role、aria-modal、aria-labelledby、aria-describedby);平滑进出场动画;关闭按钮。

使用方式:组件基于 React 与 react-dom 的 createPortal,图标使用 lucide-react。Modal 接收 isOpen、onClose、title、description、children、size(sm/md/lg/xl/full)、closeOnEscape、closeOnBackdrop 等属性;Drawer 接收 isOpen、onClose、position(left/right/bottom)、title、children。内部通过 useEffect 实现 ESC 监听、Tab 焦点循环与滚动锁定。

适用场景:确认对话框、编辑表单弹窗、用户详情抽屉等。资料还给出 ConfirmDialog、EditUserModal、UserDetailDrawer 等示例。

限制:资料未提供安装命令、依赖版本、收费或平台信息;示例代码为 TypeScript/React 实现,需自行适配项目环境。