内标签谷歌达特页面(Google Dart Pages within Tabs)

我试图加载达特选项卡中的“页”似乎并不能对它们进行设置正确。 我下面的例子有，都应该在每个网页上的文本输入框的页面，但该页面选项卡中。 我不知道如何正确选项卡中设置了这些页面。 到目前为止，我已经打算通过这个例子： 交换内容时使用聚合物的UI元素选项卡中选择选项卡 ，请让我知道如果你需要更多的信息。

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

文章来源: Google Dart Pages within Tabs