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.

Customizing the color

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

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

The ripple attribute

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:

  • <ons-button>
  • <ons-fab>
  • <ons-speed-dial-item>
  • <ons-list-item>

関連情報

属性

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

プロパティ概要

名前 概要
disabled 無効化されている場合にtrue

プリセットのmodifier

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

議論

お困りですか?

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

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

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