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>
​
    <template is="auto-binding" id="app">
​
      <paper-tabs selected="{{tab}}" valueattr="name">
        <template repeat="{{initial in pagination}}">
          <paper-tab name="{{initial}}">
            {{initial}}
          </paper-tab>
        </template>
      </paper-tabs>
​
      <items-field tab="{{tab}}"
                   items="{{items}}">
      </items-field>
​
    </template>
​
    <script>
      var app = document.querySelector('#app');
      app.pagination = ['A', 'B', 'C'];
      app.tab = 'B';
      app.items = [{name: 'Alpha'}, {name: 'Beta'}, {name: 'Charlie'}];
    </script>
​
    <polymer-element name="items-field" attributes="tab items">
      <template>
        <h2>h2 {{t}}</h2>
        <div>some other stuffs</div>
        <h3>h3 {{tab}}</h3>
        <items-list initial="{{tab}}" items="{{items}}"></items-list>
      </template>
      <script>
        Polymer({
          tab: 'A'
        });
      </script>
    </polymer-element>
​
    <polymer-element name="items-list" attributes="initial items">
      <template>
        <div>{{initial}}</div>
        <template repeat="{{item in items}}">
          <div hidden?="{{toHide(initial, item.name)}}">
            {{item.name}}
          </div>
        </template>
      </template>
​
      <script>
        Polymer({
​
          ready: function () {
​
          },
​
          toHide: function (initial, name) {
            if (initial === undefined ||
                initial === name.charAt(0)) {
              return false;
            }
​
            return true;
          }
        });
      </script>
    </polymer-element>
​
  </body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
robdodsonpro
0viewers