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>