Framework7 - 触摸涟漪
描述
触摸涟漪是仅在 Framework7 Material 主题中支持的效果。默认情况下,它在 Material 主题中启用,您可以使用 materialRipple:false 参数禁用它。
涟漪元素
您可以启用涟漪元素以匹配某些 CSS 选择器,例如 −
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .label-checkbox 等。
这些在 materialRippleElements 参数中指定。您需要启用 touch 涟漪,将元素的选择器添加到 materialRippleElements 参数以使用涟漪效果,或者仅使用 ripple 类。
涟漪波纹颜色
可以通过向元素添加 ripple-[color] 类来更改元素上的涟漪颜色。
例如 −
<a href = "#" class = "button ripple-orange">涟漪按钮</a>
或者您可以使用 CSS 定义涟漪波纹颜色,如下所示 −
.button .ripple-wave { background-color: #FFFF00; }
禁用涟漪元素
您可以通过向某些指定元素添加 no-ripple 类来禁用这些元素的涟漪。例如 −
<a href = "#" class = "button no-ripple">Ripple Button</a>