关于 overlastic
Overlastic 的参考技能；Overlastic 是面向 React、Vue 和 Svelte 的基于 Promise 的模态框、对话框与弹出层库。内容介绍命令式和声明式用法、生命周期控制及框架集成。
主要功能
- 01弹层构造器与延迟控制
- 02React、Vue 和 Svelte 集成
- 03命令式与声明式用法
- 04基于 Provider 的上下文继承
- 05从外部控制弹层生命周期
适用场景
- 01在 React 应用中添加基于 Promise 的对话框
- 02在 Vue 或 Svelte 组件中使用弹层
- 03从组件外部控制弹层
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/overlastic确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
LICENSE.mdSYNC.mdreferences/advanced-customization.mdadvanced-declarative.mdadvanced-external-control.mdadvanced-provider.mdcore-constructor.mdcore-deferred.mdcore-defines.mdcore-disclosure.mdframework-react.mdframework-svelte.mdframework-vue.md详细介绍
基于 Overlastic v0.8.7。一个基于 Promise 的模态框/对话框/弹窗库，支持 React、Vue 和 Svelte。
核心参考
| 主题 | 描述 | 参考 |
|---|---|---|
| 构造函数 | 用于创建覆盖层构造函数的核心方法 | core-constructor |
| Deferred | 具有外部控制方法的 Promise 变体 | core-deferred |
| 全局函数 | 用于挂载元素和名称管理的工具 | core-defines |
| useDisclosure | 用于管理覆盖层生命周期和状态的 Hook | core-disclosure |
框架参考
| 主题 | 描述 | 参考 |
|---|---|---|
| React 集成 | 在 React 组件中使用 Overlastic | framework-react |
| Vue 集成 | 在 Vue 3 组件中使用 Overlastic | framework-vue |
| Svelte 集成 | 在 Svelte 组件中使用 Overlastic | framework-svelte |
进阶参考
| 主题 | 描述 | 参考 |
|---|---|---|
| Provider 模式 | 使用 OverlaysProvider 进行上下文继承 | advanced-provider |
| 自定义组件 | 集成现有组件库 | advanced-customization |
| 外部控制 | 从外部控制覆盖层生命周期 | advanced-external-control |
| 声明式用法 | 在模板/JSX 中使用覆盖层 | advanced-declarative |
关键概念
- 构造函数：接收组件、props 和选项以挂载覆盖层
- Deferred：类似 Promise 的对象，带有
confirm和cancel方法用于外部控制 - 挂载选项：容器、ID、索引和 deferred 实例的配置
- 生命周期：当 deferred resolve/reject 后，组件在
duration结束后被销毁 - 命令式用法：
defineOverlay和renderOverlay用于基于回调的调用 - 声明式用法：组件可在模板/JSX 中配合 props 使用
- Provider 模式：
OverlaysProvider用于上下文继承 - 双模式支持：组件同时支持命令式和声明式模式
评论
支持 Markdown