谷歌飛鏢頁面內的標籤

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}}」