<Ripple />

実例

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.

Prop一覧

名前 型 / デフォルト値 概要
color string Color of the ripple effect. (翻訳中) Optional.
background string Color of the background. (翻訳中) Optional.
disabled bool Specifies whether the button is disabled. (翻訳中) Optional.

プリセットのmodifier

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

議論

お困りですか?

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

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

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