Google Dart Pages within Tabs

Question

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>

Answer 1

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

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> 

It would be nice to be able to bind without have to create a "pages" attribute. I have seen examples use the expression "{{$.id.attribute}}"