paper-tabs 事件侦听器更改选择？

Question

除了纸质标签外，我还有其他区域可供用户点击导航。所以，我想在发生这种情况时手动设置 paper-tab。

对于 paper-tabs，有没有我可以在另一个模板中触发的事件来更改 selected 属性值？我看到有一个 iron-select 但我认为它会在更改后触发。此外，我在另一个模板中尝试 this.fire('iron-select', 1); 并且 paper-tab 没有改变。

Answer 1

您可以绑定到 paper-tabs 的 selected 属性，或者您可以更改 paper-tabs 的值 selected 属性.

示例：

<!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>

paper-tabs 事件侦听器更改选择？

paper-tabs event listener to change selected?

polymer

polymer-1.0