내용이있는 Polymer 2.0 메뉴 탭

Question

Google Polymer Project를 처음 사용했습니다. Polymer를 사용하여 사용자 정의 웹 사이트 디자인을 만드는 프로젝트를 초기화합니다. 그러나 특정 페이지로 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>