页面示例
Home 页面
展示响应式计数器、主题切换、Badge、自定义属性和组件嵌套。
List 页面
展示动态列表的添加、删除和 for 循环语法使用。
Conditional 页面
展示 if/else 切换显示、else if 链和 match 角色渲染、Tab 切换。
Form 页面
展示文本输入双向绑定、复选框绑定、表单验证和提交。
Async 页面
展示 wasm-bindgen-futures 异步请求、加载状态和错误处理。
Lifecycle 页面
展示渲染计数器和事件日志更新。
Signals 页面
展示信号的 get/set/subscribe/try_set 操作、set_silent 静默更新。
Event 页面
展示各类事件的完整使用:鼠标事件(坐标、按键)、键盘事件、焦点事件、拖拽事件、触摸事件、滚轮事件、剪贴板事件、媒体事件、表单提交事件。
Animation 页面
展示 CSS 动画控制:淡入(euv-fade-in)、旋转(euv-spin)、脉冲(euv-pulse)、缩放进入(euv-scale-in)、进度条、颜色渐变。
Browser 页面
展示浏览器 API 调用:LocalStorage 读写、Clipboard API、Navigator 信息获取、Window 属性。
Custom Attrs 页面
展示自定义 HTML 属性(data_*、aria_*)的使用和提取。
Modal 页面
展示模态框组件:弹出、关闭、遮罩层点击关闭、自定义内容。
Select 页面
展示下拉选择框(<select>)和文本域(<textarea>)的使用与数据绑定。
Timer 页面
展示定时器功能:倒计时、开始/暂停/重置控制、完成提示。
Keep-Alive 页面
展示状态保持:通过 CSS display: none/block 切换 Tab 内容,而非销毁/重建组件,使信号值、表单输入、定时器等在 Tab 切换后得以保留。
Component Binding 页面
展示组件间数据绑定:
- Props Down / Callback Up — 父组件通过 props 传递数据,子组件通过回调通知父组件
- 强类型 Props — 传递
bool、i32等非 String 类型 props - 自定义回调 — 传递
on_change、on_submit、on_reset等回调函数 - 双向绑定 — 父子组件共享同一个 Signal,任一方修改即同步
- 跨组件响应式绑定 — 使用
watch!连接不同信号(如摄氏度/华氏度转换、RGB 颜色混合器)
File Upload 页面
展示文件上传:<input type="file"> 文件选择、拖拽上传区域、多文件和文件类型过滤。
提示
所有页面源码位于 example/src/page/ 目录下,可直接参考。