タッチリップル

Framework7のマテリアルテーマには、マテリアルタッチのリップル効果がダイナミックに実装されています。

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 parameterで定義されているものです。

このような要素をtouchすると、いわゆる「波紋」効果を見ることができます。

もし、任意のカスタム要素に「波紋」効果を加えたい場合は、その要素のセレクタを touch.touchRippleElements パラメータに追加するか、単に ripple クラスを追加するだけです。

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

波紋の色

ここで、[color]クラスは、例えば、デフォルトのTheme Colorsのものです。

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

または、CSSで .ripple-wave 要素を参照して指定することもできます。

.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 Variables

Below is the list of related CSS variables (CSS custom properties).

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