폴리머 다트를 사용하여 탭 웹 구성 요소의 탭 헤더 만들기

Question

polymer-dart을 사용하여 웹 구성 요소 웹 구성 요소를 만들려고합니다. 구성 요소 자체는 탭 컨테이너이며 사용자 정의 탭 요소를 그 안에 포함 할 수 있습니다. 나는이 같은 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 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 파일을 각 사용자 정의 탭에 삽입 .tabs div 안에 링크를 만들까요?

• custom-tab 요소의 이름이 'caption'인 경우 어떤 종류의 {{attribute-name}} 구문을 사용하여 가져올 수 있습니까?

  

  추신 :

마지막으로이 같은 구성 요소를보고 싶어 폴리머 - 다트<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']); 
    }); 
    } 
}