Polymer tabs: very simpleexample with binding to the content
This pen shows how to bind paper-tabs with sections using core-selector.
HTML
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-tabs/paper-tabs.html">
<link href="http://www.polymer-project.org/components/core-icons/core-icons.html" rel="import">
<link href="http://www.polymer-project.org/components/paper-item/paper-item.html" rel="import">
<link rel="import" href="http://www.polymer-project.org/components/paper-menu-button/paper-menu-button.html">
<script src="http://scenejs.org/api/latest/scenejs.js"></script>
<polymer-element name="tabs-with-content">
<template>
<style type="text/css">
section {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
section.core-selected {
position: static !important;
top: 0px !important;
left: 0px !important;
}
</style>
<div horizontal layout>
<div>
<paper-menu-button icon="menu">
<paper-item>Load map</paper-item>
<paper-item>Save map</paper-item>
<paper-item>Login user</paper-item>
</paper-menu-button>
</div>
<div flex>
<paper-tabs selected="{{selected}}">
<paper-tab>ViewCenter</paper-tab>
<paper-tab>Plugins</paper-tab>
<paper-tab>Configuration</paper-tab>
</paper-tabs>
</div>
</div>
<core-selector selected="{{selected}}" flex layout vertical>
<section flex layout vertical>
<canvas id="myCanvas" flex></canvas>
</section>
<section><mt-plugins></mt-plugins></section>
<section><mt-conf></mt-conf></section>
...