v-ons-list-item のリップルエフェクト

Onsen UI の v-ons-list-item コンポーネントに tappable 属性をつけると、タップしたことが視覚的にわかるようなエフェクトを表示する要素が追加されます。Android ではタップしたときにリップル（波紋）エフェクトを表示します。

また、v-ons-list-item コンポーネントでは left、center、right、expandable-content の４つのセクションが提供されています。

以下のサンプルは、left、center、right のセクションを組合せたものです。上段の「leftのみ」や「rightのみ」、「left　right」をタップするとリップルエフェクトがリストアイテムの一部にのみかかるケースがあるのがわかります。

See the Pen Onsen UI by senmyou (@senmyou) on CodePen.

Chrome DevTools で確認したところ、center セクションの要素がない場合は自動的に center セクションの要素が追加されるようです。この center セクションの要素は子要素に ons-ripple コンポーネントを持っており、タップするとこの部分にのみリップルエフェクトがかかります。

このような部分的にかかるリップルエフェクトを防ぎたい場合は、空の center セクションの要素を追加します（前述のサンプルの下段参照）。

<v-ons-list-item tappable>
  <div class="left">left</div>
  <div class="center"></div>
</v-ons-list-item>

<v-ons-list-item tappable>
  <div class="center"></div>
  <div class="right">right</div>
</v-ons-list-item>

<v-ons-list-item tappable>
  <div class="left">left</div>
  <div class="center"></div>
  <div class="right">right</div>
</v-ons-list-item>