Dart 使用聚合省道为选项卡web组件创建选项卡标题

我正在尝试使用

polymer-dart

创建自定义选项卡web组件。组件本身是一个选项卡容器，其中可以包含自定义选项卡元素。 我想要一个如下所示的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>

... 内容已跳过。。。
... 内容已跳过。。。
... 内容已跳过。。。

在

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

  语法获取它吗

最后，我想让组件看起来像这样：

另外，我只需要有关聚合dart语法的帮助，我可以自己处理css。提前谢谢

：主持人{
显示：块；
}
{{tab}}

import'包装：polymer/polymer.dart'；
导入'dart:html'作为dom；
@CustomTag（'custom-tabs'）
类CustomTabs扩展了聚合关系{
CustomTabs.created（）：super.created（）{}
@可观察
//toObservable（）用于使Polymer在选项卡列表稍后更改时更新标题（使用模板重复）
List tabHeaders=toObservable（[]）；
附（{
super.attached（）；
//将自定义选项卡元素附加到dom时初始化标题列表
updateTabHeaders（）；
}
//需要在每次自定义选项卡子项列表更改时调用
void updateTabHeaders（）{
tabHeaders.clear（）；
//内容元素需要具有id“content”
（$['content']作为dom.ContentElement）.getDistributedNodes（）.forEach（（e）{
//例如，可以根据“hidden”等属性跳过此处的元素
tabHeaders.add（（作为dom.Element.attributes['name']）；
});
}
}