纸张选项卡事件监听器更改选定？

除了纸张选项卡外，我还有其他用户可以点击进行导航的区域。所以，我想在发生这种情况时手动设置paper-tab。纸张选项卡事件监听器更改选定？

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

来源

2015-11-01 dman

您可以绑定到纸张标签的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>

来源

2015-11-02 00:15:14

仅我正在与第一码块格式具有的问题是，'e.target'返回与类'纸tab'和它一个'div'不包含'name'属性。 – dman

纸张选项卡事件监听器更改选定？

回答

相关问题