タッチリップル

Framework7 Materialテーマには、マテリアルタッチリップルエフェクトの優れた動的な実装が付属しています。

MDテーマではデフォルトで有効になっています。

ただし、アプリパラメータで touch.mdTouchRipple:false を渡すことで無効にすることができます。

リップル要素

デフォルトでは、アプリパラメータの touch.touchRippleElements で定義されている、次の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 パラメータに追加するか、単に 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);
}