觸控漣漪

Framework7 Material 主題附帶了 Material 觸控漣漪效果的絕佳動態實作。

它在 MD 主題中預設啟用。

不過，你可以透過傳遞 touch.mdTouchRipple:false 應用程式參數 來停用它。

漣漪元素

預設情況下，它會針對符合下列 CSS 選擇器的元素啟用

.ripple, .link, .item-link, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus, .menu-item-content, .list.accordion-list .accordion-item-toggle

這些元素定義在 touch.touchRippleElements 應用程式參數 中。

因此，當你觸控此類元素時，你會看到所謂的「漣漪」效果。

如果你需要為任何自訂元素加入「漣漪」效果，你可以將此元素的選擇器加入 touch.touchRippleElements 參數，或僅加入 ripple 類別。

<a href="#" class="my-link ripple">Link With Ripple Effect</a>

漣漪波紋顏色

如果你想要變更某些元素上「漣漪」波紋的顏色，你可以將 ripple-[color] 類別加入所需的元素，其中 [color] 類別是預設 主題顏色 之一，例如

<a href="#" class="button ripple-color-red">Button With Red Ripple</a>

或者，你可以透過參照 .ripple-wave 元素來使用 CSS 指定它

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

或使用 CSS 變數

.button .ripple-wave {
  --f7-touch-ripple-color: #ff0000;
}

停用特定元素的漣漪

如果你想要停用特定元素的漣漪元素，你可以將 no-ripple 類別加入此類元素

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

CSS 變數

以下是相關 CSS 變數（CSS 自訂屬性）的清單。

:root {
  --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
  --f7-touch-ripple-white: rgba(255, 255, 255, 0.15);
  --f7-touch-ripple-color: var(--f7-touch-ripple-black);
}
.dark {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
}