Framework7 - 点击涟漪效果

描述

点击涟漪效果仅在 Framework7 的 Material 主题中受支持。默认情况下，它在 Material 主题中启用，您可以使用 `materialRipple: false` 参数将其禁用。

涟漪元素

您可以启用涟漪元素以匹配某些 CSS 选择器，例如：

• ripple
• a.link
• a.item-link
• .button
• .tab-link
• .label-radio
• .label-checkbox 等。

这些在 `materialRippleElements` 参数中指定。您需要启用触摸涟漪，将元素选择器添加到 `materialRippleElements` 参数以使用涟漪效果，或者只使用 `ripple` 类。

涟漪波纹颜色

可以通过向元素添加 `ripple-[color]` 类来更改元素的涟漪颜色。

例如：

<a href = "#" class = "button ripple-orange">Ripple Button</a>

或者您可以使用如下所示的 CSS 定义涟漪波纹颜色：

.button .ripple-wave {
   background-color: #FFFF00;
}

禁用涟漪元素

您可以通过向指定元素添加 `no-ripple` 类来禁用这些元素的涟漪效果。例如：

<a href = "#" class = "button no-ripple">Ripple Button</a>