PolymerElements / paper-button

A button à la Material Design
https://www.webcomponents.org/element/PolymerElements/paper-button
138 stars 64 forks source link

data-bind active attribute #166

Closed govis closed 6 years ago

govis commented 7 years ago

To support scenario when buttons are used in groups e.q. for pagination one would need to be able to data-bind the active attribute, which doesn't seem to be working:

http://jsbin.com/jipewocube/edit?html,console,output

Currently Polymer.IronButtonState._tapHandler does not appear to allow for managing it externally. Thanks.

valdrinkoshi commented 6 years ago

It seems you might want to disable the toggling feature and handle the tap event yourself:


  <dom-module id="test-elem">
    <template>
      <style>
        paper-button[active] {
          background: blue;
          color: white;
        }
      </style>
      <paper-button toggles="[[toggles]]" active="[[selected]]" on-tap="_onTap">Tap Me</paper-button>
    </template>
    <script>
      Polymer({
        is: 'test-elem',
        properties: {
          toggles: {
            type: Boolean,
            value: false,
            readOnly: true
          },
          selected: {
            type: Boolean,
            value: false,
            notify: true
          },
        },
        _onTap: function (event) {
          this.selected = true;
          console.log(this.selected);
        }
      });
    </script>
  </dom-module>
  <test-elem></test-elem>
govis commented 6 years ago

Ok thanks, will give it a try