页面示例
Signals 页面
展示信号的 get/set/subscribe 操作、set_silent 静默更新、set_untracked 不追踪写入。
Event 页面
展示各类事件的完整使用:鼠标事件(坐标、按键)、键盘事件、焦点事件、拖拽事件、触摸事件、滚轮事件、剪贴板事件、媒体事件、表单提交事件。
List 页面
展示动态列表的添加、删除和 for 循环语法使用。
Observer 页面
展示 IntersectionObserver API 的使用:监测容器元素进入/离开视口,日志输出交叉比例和可见子项数量估算。
Conditional 页面
展示 if/else 切换显示、else if 链和 match 角色渲染、Tab 切换。
Modal 页面
展示模态框组件:弹出、关闭、遮罩层点击关闭、自定义内容。
Select 页面
展示下拉选择框(<select>)和文本域(<textarea>)的使用与数据绑定。
Async 页面
展示 wasm-bindgen-futures 异步请求、加载状态和错误处理。
Form 页面
展示文本输入双向绑定、复选框绑定、表单验证和提交。
File Upload 页面
展示文件上传:<input type="file"> 文件选择、拖拽上传区域、多文件和文件类型过滤。
Timer 页面
展示定时器功能:倒计时、开始/暂停/重置控制、完成提示。
Animation 页面
展示 CSS 动画控制:淡入(euv-fade-in)、旋转(euv-spin)、脉冲(euv-pulse)、缩放进入(euv-scale-in)、进度条、颜色渐变。
Browser 页面
展示浏览器 API 调用:LocalStorage 读写、Clipboard API、Navigator 信息获取、Window 属性。
Lifecycle 页面
展示渲染计数器和事件日志更新。
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 颜色混合器)
Custom Attrs 页面
展示自定义 HTML 属性(data_*、aria_*)的使用和提取。
Dynamic Component 页面
展示动态标签切换:使用 {tag_expr} { content } 语法在运行时切换标签类型。支持原生 HTML 元素(div、span)和用户组件(my_card、badge),信号变化时动态标签自动重新渲染。
Virtual List 页面
展示高性能虚拟滚动列表:10,000 条数据的窗口化渲染,仅创建可见区域内的 DOM 节点加上少量 overscan 缓冲项,无论列表总大小如何,DOM 节点数量保持恒定。实时显示总数、可见数量和索引范围。
提示
所有页面源码位于 example/src/page/ 目录下,可直接参考。