Playground & Interactive Lab

Alpine.js 交互实验室

告别重型 SPA 框架，用几行声明式指令实现高效、轻巧的客户端动态交互。这里的每一个示例均可直接复制使用。

所有交互均遵循脚手架规范：局部状态使用 x-data，跨组件状态使用 $store，网络请求通过 $api，复杂逻辑建议沉淀在 src/scripts/。

Alpine.store

开箱即用的全局消息通知队列，支持多层叠堆与自动定时退出动画：

x-data

简单内联状态驱动，数值变化与 DaisyUI Progress 进度条毫秒级联动：

当前数值:10

Alpine Plugin

内置已注册的官方 Mask 插件，自动格式化日期与银行卡号等规则输入：

日期输入掩码 (MM/DD/YYYY)

卡号输入掩码 (每4位空格分隔)

Alpine.magic

通过 Alpine.magic 全局注册，内联直接调用 ky 实例，无需任何 import：

基于 HTML5 原生<dialog> 与 showModal()，享顶级 A11y 焦点锁定与 ESC 原生支持：

Tabs Pattern

用一行状态驱动多 Tab 互斥切换展示：

⚡ 极致静态：Astro 负责 95% 的页面骨架，Alpine 负责 5% 的关键交互。

🚀 百点灯塔：轻量客户端体积（仅 ~15KB），毫秒级首屏加载。

❤️ 开箱即用：无需配置复杂打包管线，所写即所得。