使用polymer-dart为选项卡Web组件创建选项卡标题

Question

我正在尝试使用polymer-dart创建自定义标签网络组件。组件本身是一个选项卡容器，其中可以包含自定义选项卡元素。 我想要一个像这样的HTML：

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

在custom-tabs html文件中我希望有这样的内容：

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

可以：

• 对于插入.tabs内的每个自定义标签创建div内的链接？
• 如果custom-tab元素有一个名为'caption'的属性，我可以使用某种{{attribute-name}}语法来获取它吗？

最后我想看看这样的组件：

P.S。我只需要 polymer-dart <template>语法的帮助，我可以自己处理css。提前谢谢！

Answer 1

<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']);
    });
  }
}