触摸涟漪

Framework7 Material Theme 附带了出色的 Material 触摸涟漪效果实现。

它默认为 MD 主题启用。

但是，您可以通过传递touch.mdTouchRipple:false app 参数.

涟漪元素

默认情况下，它对符合以下 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 app 参数.

所以当您touch这些元素时，您将看到所谓的“涟漪”效果。

如果您需要为任何自定义元素添加“涟漪”效果，您可以添加此元素的 选择器到touch.touchRippleElements参数或只需添加ripple类。

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

涟漪波浪颜色

如果您想更改某些元素上“涟漪”波浪的颜色，然后您可以添加ripple-[color]类到所需元素，其中[color]类是默认主题颜色, for example:

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

或您可以使用 CSS 通过引用.ripple-waveelement:

.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);
}