Vue 2 Reference > v-ons-ripple

v-ons-ripple

マテリアルデザインのリップル効果をDOM要素に追加します。

実例

Ripple

The VOnsRipple component is used to add a Material Design ripple effect to an element. This effect will expand from the location point the user taps until it covers the whole element.

To add a ripple effect to an element the Ripple component should be placed as a child.

<div style={{width: 100, height: 100, backgroundColor: 'grey'}}>
  <v-ons-ripple></v-ons-ripple>
</div>

The color of the ripple effect defaults to gray. It can be customized using the color property. It is also possible to customize the background color with the background property.

<v-ons-ripple color='red' background='blue'></v-ons-ripple>

The ripple prop

There are some components that support the ripple effect using a ripple property. The VOnsButton component is one of those. In this case, instead of using the Ripple component only the property ripple needs to be added:

<v-ons-button ripple>
  Ripple!
</v-ons-button>

Other components that support the ripple property are: VOnsListItem, VOnsFab, VOnsSpeedDial and VOnsTab.

関連情報

Prop一覧

名前 型 / デフォルト値 概要
background String 背景の色を設定します。 Optional.
center Boolean この要素を設定すると、エフェクトの位置が要素の真ん中から始まります。 Optional.
color String リップルエフェクトの色を指定します。 Optional.
disabled Boolean この属性が設定された場合、リップルエフェクトは無効になります。 Optional.
modifier String エフェクトの表現を指定します。 Optional.
size String エフェクトのサイズを指定します。”cover”もしくは”contain”を指定します。デフォルトは”cover”です。 Optional.

プリセットのmodifier

Name 概要
light-gray エフェクトの色が明るい灰色になります。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。