带有内容的 Polymer 2.0 菜单选项卡

Question

我是 Google 聚合物项目的新手。我刚刚初始化一个项目来使用 Polymer 进行自定义网站设计。但是，我想知道如何使用特定页面构建导航栏菜单。当我们点击每个选项卡时，我需要在主体上显示单独的内容。任何帮助将不胜感激!!

这是我的代码：

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

要使其正常工作，您需要将 iron-pages 与 paper-tabs 结合使用。检查更新后的 fiddle.

 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>

带有内容的 Polymer 2.0 菜单选项卡

Polymer 2.0 menu tabs with content

html

javascript

css

polymer-2.x