Question

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

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

Answer 1

您可以绑定到纸质标签'selected属性，也可以更改纸张标签'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事件监听器改变选择？

1 个答案: