标签中的Google Dart网页 [英] Google Dart Pages within Tabs

问题描述

我尝试在DART的标签页中加载网页，似乎无法正确设置。我的下面的例子有页面，应该在每个页面上显示文本输入，但页面在选项卡内。我不知道如何在标签内正确设置这些页面。到目前为止，我一直在这个例子：切换内容当使用聚合物ui元素标签选择标签时如果您需要更多信息，请告诉我。

I'm attempting to load "pages" within tabs in Dart and can not seem to set them up properly. My below example has pages that are supposed to show text inputs on each page but the pages are within tabs. I'm not sure how to properly set these pages up within tabs. So far I had been going by this example: Switching content when tab selected using polymer ui elements tabs Please let me know if you need more information.

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

推荐答案

p>

I tried it and it worked so far:

<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();
}

这篇关于标签中的Google Dart网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！