ons-ripple

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

Ripple effect

The ripple effect is a part of Material Design. The effect extends from the point the user taps to the edges of the element.

Try to click the square below to see it in action.

To customize the color of the of ripple effect the color and background attributes are used.

<ons-ripple color="#bb8fce" background="#85c1e9">

There are some elements that support the ripple attribute. For these elements adding a ripple effect is very simple.

<ons-button ripple>
  Tap me!
</ons-button>

The elements that support this attribute are:

[編集]

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

[編集]

名前	概要
center	この要素を設定すると、エフェクトの位置が要素の真ん中から始まります。
disabled	無効化されている場合に`true`。

[編集]

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

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

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

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