谷歌飞镖页面内的标签

Question

我试图在飞镖中的标签中加载“页面”，似乎无法正确设置它们。我下面的例子有页面应该显示在每个页面上的文本输入，但页面在标签内。我不确定如何在标签页中正确设置这些页面。到目前为止，我一直在通过这个例子：Switching content when tab selected using polymer ui elements tabs如果您需要更多信息，请让我知道。

<paper-tabs id="Tabs" selected="0" style='width:800px; height:175px; color:green;'> 

<paper-tab id="systemtab"> System 
<core-pages selected="0"> 
    <paper-input id='version' label="Version:" readonly></paper-input> 
</core-pages> 
</paper-tab> 
<paper-tab id="userTab"> User 
    <core-pages selected="1"> 
    <paper-input id='Welcome' label="Display Welcome Page:" readonly></paper-input> 
    <paper-input id='user_name' label="User Name:" readonly></paper-input> 
    </core-pages> 
</paper-tab> 

</paper-tabs> 

Answer 1

我尝试过了，它到目前为止的工作：

<link rel="import" href="../../packages/polymer/polymer.html"> 
<link rel='import' href='../../packages/paper_elements/paper_tabs.html'> 
<link rel='import' href='../../packages/paper_elements/paper_tab.html'> 
<link rel='import' href='../../packages/paper_elements/paper_input.html'> 
<link rel='import' href='../../packages/core_elements/core_pages.html'> 

<polymer-element name="app-element"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <paper-tabs id="Tabs" selected="{{page}}" style='width:800px; height:175px; color:green;'> 
     <paper-tab>System</paper-tab> 
     <paper-tab>User</paper-tab> 
    </paper-tabs> 

    <core-pages selected="{{page}}"> 
     <div> 
     <paper-input id='version' label="Version:" readonly></paper-input> 
     </div> 
     <div> 
     <paper-input id='Welcome' label="Display Welcome Page:" readonly></paper-input> 
     <paper-input id='user_name' label="User Name:" readonly></paper-input> 
     </div> 
    </core-pages> 

    </template> 
    <script type="application/dart" src="app_element.dart"></script> 
</polymer-element> 

import 'package:polymer/polymer.dart'; 

@CustomTag('app-element') 

class AppElement extends PolymerElement { 

    @observable 
    int page = 0; 

    AppElement.created() : super.created(); 
} 

Answer 2

<link rel="import" href="../../packages/polymer/polymer.html"> 
 
<link rel='import' href='../../packages/paper_elements/paper_tabs.html'> 
 
<link rel='import' href='../../packages/paper_elements/paper_tab.html'> 
 
<link rel='import' href='../../packages/paper_elements/paper_input.html'> 
 
<link rel='import' href='../../packages/core_elements/core_pages.html'> 
 

 
<polymer-element name="app-element"> 
 
    <template> 
 
    <paper-tabs id="tabs"> 
 
     <paper-tab>System</paper-tab> 
 
     <paper-tab>User</paper-tab> 
 
    </paper-tabs> 
 

 
    <core-pages selected="{{$.tabs.selected}}"> 
 
     <div> 
 
     <paper-input id='version' label="Version:" readonly></paper-input> 
 
     </div> 
 
     <div> 
 
     <paper-input id='Welcome' label="Display Welcome Page:" readonly></paper-input> 
 
     </div> 
 
    </core-pages> 
 

 
    </template> 
 
    <script type="application/dart" src="app_element.dart"></script> 
 
</polymer-element>

如果能够绑定而无需创建“页面”属性，那将是非常好的。我已经看到例子使用表达式“{{$ .id.attribute}}”