CODEWITHSUNDEEP
cordovapolymermaterial-designpaper-elements
Heisenberg
Heisenberg

Reputation: 1508

How to disable ripple effect in polymer paper elements?

I am writing a web app for mobile using polymer which will be packaged using phonegap to run on android device. I am using polymer paper-tabs and core-animated-pages to show a switching effect. On a device, everything works well except the ripple effect on tab touch. It makes the entire thing looks ugly and laggy. How do I disable the ripple effect in paper tabs (and eventually every other paper element) ?

I tried setting the noink property to true in source of paper-tabs as following, but it din't work.

 Polymer('paper-tabs', {

/**
 * If true, ink ripple effect is disabled.
 *
 * @attribute noink
 * @type boolean
 * @default false
 */
noink: true,

Upvotes: 3

Views: 3270

Answers (1)

ebidel
ebidel

Reputation: 24109

You can use the noink attribute on the elements that have ripple effects to turn it off:

<paper-button noink>No ink!<paper-button>
<paper-tabs noink>...<paper-tabs>

AFAICT, the first may not work until the next Polymer release of paper-button. It does work in master however if you want to bleed on the edge.

Upvotes: 12

Related Questions