触摸涟漪

Framework7 Material Theme 提供了 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);
}

改善此文档

在此页面上

涟漪元素
涟漪波纹颜色
禁用特定元素的涟漪
CSS 变量