React Reference > ons-ripple Component

<ons-ripple />

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

実例

Ripple

The Ripple 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'}}>
  <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.

<Ripple color='red' background='blue' />

The ripple prop

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

<Button ripple>
  Ripple!
</Button>

Other components that support the ripple property are: ListItem, Fab, SpeedDial and Tab.

関連情報

属性

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

プロパティ概要

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

プリセットのmodifier

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

お困りですか?

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

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

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