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>