标签页中的谷歌飞镖页面

Question

我试图在Dart中的选项卡中加载"页面"，但似乎无法正确设置它们。我下面的例子中有一些页面应该在每个页面上显示文本输入，但这些页面都在选项卡中。我不知道如何在选项卡中正确设置这些页面。到目前为止，我一直在举这个例子：当使用聚合物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>

如果能够绑定而不必创建"pages"属性，那就太好了。我看到过使用表达式"｛｛$.id.attribute｝｝"