2

以下をどのように定義しますか。

<bf-tabnavigator>    
  <bf-tab>
    <bf-tab-title><a href="#home">Home</a></bf-tab-title>
    <bf-tab-content>My Content</bf-tab-content>
  </bf-tab>      
  <bf-tab>
    <bf-tab-title><a href="#b">B</a></bf-tab-title>
    <bf-tab-content>My B</bf-tab-content>
  </bf-tab>  

</bf-tabnavigator>

に効果的に変換されるポリマー要素として

 <ul class="nav nav-tabs">
    <li><a href="#home">Home</a></li>
    <li><a href="#b">B</a></li>
 </ul>

 <div class="tab-content">
    <div class="tab-pane" id="home">My Content</div>
    <div class="tab-pane" id="b">My B</div>    
 </div>

次のようなことができないため、bf-tabnavigator 要素でタブを生成できません。

 <ul class="nav nav-tabs">     
     <content select="bf-tab bf-tab-title"></content>
 </ul>

 <div class="tab-content">     
     <content select="bf-tab bf-tab-content"></content>
 </ul>

では 1-deep しか選択できないためです。しかし、bf-tab の要素を生成することはできません。これは、異なるフレーバーで 2 回適用する必要があるためです (ul nav-tabs に 1 回、tab-content に 1 回)。

これを行うにはどうすればよいですか？

4

2 に答える 2

1

これは不可能だと思います。出力が例のように見える場合でも、shadowDOM はバリアも作成します。Bootstrap (または同様の) CSS を使用することはできません。

あなたができることは、非表示にして<content>それを複製するs content into the` 要素です。これにより、有効なリストが生成されます。要素内で CSS を参照すると、Bootstrap のような CSS を使用することもできます (これが意図されているかどうかはわかりません)。

于 2013-12-29T18:05:15.703 に答える
0

挿入ポイントを巧妙:nth-of-typeに使用して、アクティブなときに正しいタイトル/コンテンツをレンダリングすることができます。

https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs.html#L26

于 2014-01-01T03:25:21.693 に答える