用途:为按钮或可点击卡片提供点击确认式的涟漪反馈,适合触屏优先、类 App 的界面。克制使用:破坏性操作(避免鼓励重复点击)和文字链接(显得笨重)不宜使用;已有强烈按压态的元素也不宜叠加。
使用方式:把 ripple.css 和 ripple.js 复制进项目并引入,给按钮加上 class="ripple",脚本会自动绑定,在指针位置生成涟漪并自行清理。元素需 position:relative; overflow:hidden,CSS 会进行设置。
无障碍与性能:在 prefers-reduced-motion 下不生成涟漪,由原生 :active 状态提供反馈;动画只使用 transform 与 opacity,每次波纹在 animationend 时移除自身。React 中在 useEffect 内调用 attachRipple(ref.current)。颜色取自元素当前 color,可通过设置文字颜色控制。
限制:依赖项目自带 CSS 与 JS 文件及 MOTION-SPEC.md;具体安装命令、版本、许可证、浏览器兼容范围和包管理信息暂未提供。