How do I turn off the ripple effect in polymer paper elements?
I am writing a mobile web application using polymer
which will be packaged with phonegap
to run on an android device. I am using polymer paper-tabs
and core-animated-pages
to show the switching effect. Everything works well on the device except ripple effect
for the tab. It makes the whole thing look ugly and laggy. How do I turn off the ripple effect on paper tabs (and eventually every other piece of paper)?
I tried setting the property noink
to true
in the source of paper tabs as follows, but it doesn't work.
Polymer('paper-tabs', {
/**
* If true, ink ripple effect is disabled.
*
* @attribute noink
* @type boolean
* @default false
*/
noink: true,
You can use the attribute noink
on elements that have a ripple effect to turn it off:
<paper-button noink>No ink!<paper-button>
<paper-tabs noink>...<paper-tabs>
AFAICT, the former may not work until the next release of the paper with polymer. It works in the wizard, however, if you want to bleed on the edge.