Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.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">
  </head>
  <body>
​
    <polymer-element name="x-menu">
      <template>
        <style>
          ::content > * {
            display: none;
          }
        </style>
        <content id="content" select="a"></content>
        <paper-tabs link>
          <template repeat="{{tab in tabs}}">
            <paper-tab>
              <a href="{{tab.href}}" horizontal center-center layout> 
                {{tab.textContent}}
              </a>
            </paper-tab>        
          </template>
        </paper-tabs>
      </template>
      <script>
        Polymer({
          domReady: function() {
            this.tabs = this.$.content.getDistributedNodes().array();
          }
        });
      </script>
    </polymer-element>
    
    <x-menu>
      <a href="#foo">Foo</a>
      <a href="#bar">Bar</a>
      <a href="#baz">Baz</a>
    </x-menu>
​
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
robdodsonpro
0viewers