Material-ui: How to add ripple effect on a clickable card?

[ankitsharma6466]

Problem description

My website uses cards as feeds and the cards are clickable, I wish to add ripple effect to card. Is there any possibility to do so?

[Serfenia]

You would have to use the TouchRipple component that is used by buttons to create a ripple effect.

Check it being used within the EnhancedButton. You would have to extend the Gard functionality by using the TouchRipple effect.

Hope this gets you going.

PS: This is not a problem, more like a question. If you want it as feature just add it as feature request.

[nehalbhanushali]

@ankitsharma6466 does this answer your question?

[ankitsharma6466]

@Serfenia Thanks for the help, It worked perfectly.
@nehalbhanushali yes.

[msemikin]

@ankitsharma6466 Could you please share your solution?

[ankitsharma6466]

@caliber01
I don't have the source code as my requirements changed. But to help there are two approaches to do this:
1) You can try implementing your own component with same properties as provided in enhanced button code( try copy paste :p ).
2) or this is a work around, you can use Button as parent and pass your view as node within children prop. this is the easiest way. :)

hope this helps.

[msemikin]

@ankitsharma6466 I didn't manage to import TouchRipple as it is not exported, but the second option is what I was looking for, thank you!

[PolGuixe]

@caliber01 did you managed to make it?

<FlatButton>
 <Card>
 // {... cardContents}
</Card>
</FlatButton>

Doesn't work for me

[FrantisekGazo]

@PolGuixe try this:
1) use RaisedButton instead of FlatButton
2) do not use Card

[PolGuixe]

@FrantisekGazo I used RaisedButton and it worked. I am stil using Card. ;)

[rcarvalhosilva]

@PolGuixe Can you show how you did it? I'm trying to do the same thing but the Card always overflows the RaisedButton and the effect doesn't work as it should.

[PolGuixe]

@rcarvalhosilva check if this works for you: https://gist.github.com/PolGuixe/8abbac0a720e78a12eeb382ef1ef4549