使用Polymer-Dart為標簽Web組件創建標簽標題

Question

我正在嘗試使用polymer-dart創建自定義標簽的 Web組件。 組件本身是一個標簽容器，其中可以包含一個custom-tab元素。 我想要一個這樣的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}}語法來獲取它嗎？

最后，我想看起來像這樣的組件：

PS我只需要有關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']);
    });
  }
}