search

PolymerElements / paper-icon-button

A Material Design icon button
https://www.webcomponents.org/element/PolymerElements/paper-icon-button
42 stars 44 forks source link

Need an option to disable circle effect on ripple #78

Closed vimalraj-a closed 8 years ago

vimalraj-a commented 8 years ago

Description

Need an option to disable circle effect on ripple

Expected outcome

Add property to enable or disable the circle effect, so that we could have paper-icon-button without circle ripple effect Paper Icon Button without circle effect : <paper-icon-button square></paper-icon-button>

Actual outcome

There is no such option to change or disable the effect. It is hard coded in _createRipple method

Live Demo

Steps to reproduce

  1. Put paper-icon-button element in the page
  2. Add square attribute in paper-icon-button

Browsers Affected

notwaldorf commented 8 years ago

That kind of ripple is not really consistent with the Material Design spec, so it's very unlikely we would bake this into paper-icon-button. However, you can add this yourself by disabling the paper-icon-button's inner ripple (with noink), and then adding a ripple to a parent, square container: http://jsbin.com/totoxu/edit?html,output