modal-drawer-system - 无障碍模态框与抽屉组件生成器
生成带有焦点陷阱、ESC 关闭、滚动锁定、Portal 渲染和 ARIA 属性的无障碍模态框与抽屉组件。
标签
更新于: 2026-06-30能力
典型输入
典型输出
该技能可以做什么
- 创建模态框组件
- 创建抽屉组件
- 创建确认对话框
- 创建编辑表单弹窗
- 创建详情视图抽屉
- 实现焦点陷阱
- 实现页面滚动锁定
- 实现 Portal 渲染
- 添加 ARIA 属性
- 添加键盘导航
输入
- React 项目
- 组件配置（尺寸、位置、样式变体）
- 子内容（React 节点）
输出
- 模态框组件源代码
- 抽屉组件源代码
- 确认对话框源代码
- 编辑表单弹窗源代码
要求
- 支持 Hooks 的 React 环境
- react-dom 用于 Portal 渲染
- lucide-react 图标库
- Tailwind CSS 样式框架
- Next.js 客户端组件支持