内容2.0のメニュー2.0タブポリマー

Question

私はGoogleポリマープロジェクトを初めて利用しています。私はちょうどPolymerを使ってカスタムWebサイトデザインを作るプロジェクトを初期化します。しかし、私は特定のページでnavbarメニューを構築する方法を知りたいです。それぞれのタブをクリックすると、私は身体に別々のコンテンツを表示する必要があります。どんな助けでも大歓迎です!!

iron-image { 
 
    width: 400px; 
 
    height: 400px; 
 
    background-color: black; 
 
}

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 

 
<link rel="import" href="paper-styles/classes/global.html"> 
 
<link rel="import" href="paper-tabs/paper-tabs.html"> 
 

 
<style is="custom-style"> 
 
    :root { 
 
    --paper-tabs-selection-bar-color: var(--paper-light-blue-900); 
 
    --paper-tab-ink: var(--paper-light-blue-100); 
 
    
 
    --paper-tabs: { 
 
     color: white; 
 
     background-color: var(--paper-light-blue-500); 
 
    }; 
 
    } 
 
</style> 
 

 
<paper-tabs selected="0"> 
 
    <paper-tab>TAB 1</paper-tab> 
 
    <paper-tab>TAB 2</paper-tab> 
 
    <paper-tab>TAB 3</paper-tab> 
 
</paper-tabs>

JSFiddle：https://jsfiddle.net/8boLeohf/

Answer 1

はあなたがpaper-tabsでiron-pagesを使用する必要が働いてそれを作るために

は、ここに私のコードです。更新されたフィドルをチェックしてください。

var pages = document.querySelector('iron-pages'); 
 
    var tabs = document.querySelector('paper-tabs'); 
 

 
    tabs.addEventListener('iron-select', function() { 
 
     pages.selected = tabs.selected; 
 
    });

:root { 
 
    --paper-tabs-selection-bar-color: var(--paper-light-blue-900); 
 
    --paper-tab-ink: var(--paper-light-blue-100); 
 
    --paper-tabs: { 
 
    color: white; 
 
    background-color: var(--paper-light-blue-500); 
 
    } 
 
    ; 
 
} 
 
iron-image { 
 
    width: 400px; 
 
    height: 400px; 
 
    background-color: black; 
 
}

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 

 
<link rel="import" href="paper-styles/classes/global.html"> 
 
<link rel="import" href="paper-tabs/paper-tabs.html"> 
 
<link rel="import" href="iron-pages/iron-pages.html"> 
 

 
<style is="custom-style"> 
 
    :root { 
 
    --paper-tabs-selection-bar-color: var(--paper-light-blue-900); 
 
    --paper-tab-ink: var(--paper-light-blue-100); 
 
    
 
    --paper-tabs: { 
 
     color: white; 
 
     background-color: var(--paper-light-blue-500); 
 
    }; 
 
    } 
 
</style> 
 

 
<div unresolved vertical layout> 
 
    <paper-tabs selected="0"> 
 
    <paper-tab>TAB 1</paper-tab> 
 
    <paper-tab>TAB 2</paper-tab> 
 
    <paper-tab>TAB 3</paper-tab> 
 
    </paper-tabs> 
 
    <iron-pages selected="0"> 
 
    <div>Page 1</div> 
 
    <div>Page 2</div> 
 
    <div>Page 3</div> 
 
    </iron-pages> 
 
</div>