CODEWITHSUNDEEP
polymerpolymer-1.0
dman
dman

Reputation: 11073

paper-tabs event listener to change selected?

In addition to paper tabs, I have other areas where a user can click to navigate. So, I want to set the paper-tab manually when this happens.

For paper-tabs, is there a event that I can fire in another template to change the selected attribute value? I saw that there was a iron-select but I think it fires after a change. In addition, I tried this.fire('iron-select', 1); in another template and the paper-tab did not change.

Upvotes: 0

Views: 1370

Answers (1)

Neil John Ramal
Neil John Ramal

Reputation: 3734

You can bind to the paper-tabs' selected attribute or you can change the value of the paper-tabs' selected property.

Example:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <base href="http://polygit.org/polymer+:master/components/">
  <link rel="import" href="paper-tabs/paper-tabs.html">
  <link rel="import" href="paper-header-panel/paper-header-panel.html">
  <link rel="import" href="paper-toolbar/paper-toolbar.html">
  <link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
  <link rel="import" href="paper-radio-group/paper-radio-group.html">
  <link rel="import" href="paper-radio-button/paper-radio-button.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>

<body class="fullbleed">
  <template is="dom-bind" id="app">
    <paper-header-panel>
      <paper-toolbar>
        <paper-tabs selected="{{selected}}" attr-for-selected="name">
          <paper-tab name="one">One</paper-tab>
          <paper-tab name="two">Two</paper-tab>
          <paper-tab name="three">Three</paper-tab>
        </paper-tabs>
      </paper-toolbar>
      <div class="container">
        <paper-radio-group selected="{{selected}}">
          <paper-radio-button name="one">One</paper-radio-button>
          <paper-radio-button name="two">Two</paper-radio-button>
          <paper-radio-button name="three">Three</paper-radio-button>
        </paper-radio-group>
        <div class="button-group">
          <paper-button data-name="one" on-tap="selectTab">One</paper-button>
          <paper-button data-name="two" on-tap="selectTab">Two</paper-button>
          <paper-button data-name="three" on-tap="selectTab">Three</paper-button>
        </div>
      </div>
    </paper-header-panel>
  </template>

  <script>
    (function() {
      var app = document.getElementById('app');
      app.selected = "one";
      app.selectTab = function(e) {
        app.selected = e.target.dataset.name;
      };
    })();
  </script>
</body>

</html>

Upvotes: 2

Related Questions