Creating tab header for tabs web component using polymer-dart

Question

I'm trying to create custom-tabs web-component using polymer-dart. The component itself is a tab container, which can have a custom-tab elements inside of it. I want to have an html like this:

<custom-tabs selected="three">
   <custom-tab name="one">... content skipped ...</custom-tab>
   <custom-tab name="two">... content skipped ...</custom-tab>
   <custom-tab name="three">... content skipped ...</custom-tab>
</custom-tabs>

In custom-tabs html file I want to have something like this:

<polymer-element name="custom-tabs">
    <template>
       <div class="tabs">
           <content select="custom-tab"></content>
       </div>
       <nav>
           For each of custom-tab I want to create tab header (link) here
       </nav>
    </template>
</polymer-element>

Is it possible to:

For each custom tab inserted into .tabs create link inside div?
If custom-tab element has a property named 'caption', can I get it using some kind of {{attribute-name}} syntax?

Finally I want to look the component like this:

tabs

P.S. I only need help on polymer-dart <template> syntax, I can deal with css myself. Thanks in advance!

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-09-18T06:31:37

<link rel="import" href="../../packages/polymer/polymer.html">

<polymer-element name="custom-tabs">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <nav>
      <template repeat="{{tab in tabHeaders}}">
        <div>{{tab}}</div>
      </template>
    </nav>
    <div class="tabs">
      <content id="content" select="custom-tab"></content>
    </div>
  </template>
  <script type="application/dart" src="custom_tabs.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';
import 'dart:html' as dom;

@CustomTag('custom-tabs')

class CustomTabs extends PolymerElement {

  CustomTabs.created() : super.created() {}

  @observable
  // toObservable() is to make Polymer update the headers (using template repeat) when the tabs list changes later on
  List<String> tabHeaders = toObservable([]); 

  attached() {
    super.attached();

    // initialize the header list when the custom-tabs element is attached to the dom    
    updateTabHeaders();
  }

  // needs to be called every time the list of custom-tab children changes
  void updateTabHeaders() {
    tabHeaders.clear();
    // the content element needs to have the id 'content' 
    ($['content'] as dom.ContentElement).getDistributedNodes().forEach((e) {
      // you can skip elements here for example based on attributes like 'hidden'
      tabHeaders.add((e as dom.Element).attributes['name']);
    });
  }
}

Creating tab header for tabs web component using polymer-dart

1 Answers