demo-bare-tabs.html

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="../px-theme/px-theme.html"/>
<link rel="import" href="px-tab-set.html"/>
<link rel="import" href="px-tab.html"/>
<link rel="import" href="px-tab-pages.html"/>

<dom-module id="demo-bare-tabs">
  <template>
    <section>
      <px-tab-set bare id="tab-set-bare" selected="{{selected}}">
        <px-tab id="tab1-bare">Bengal Tiger</px-tab>
        <px-tab id="tab2-bare">Black Spider Monkey</px-tab>
        <px-tab id="tab3-bare">Sumatran Elephant</px-tab>
        <px-tab id="tab4-bare">Ganges River Dolphin</px-tab>
      </px-tab-set>
      <px-tab-pages selected="{{selected}}">
        <div>
          <p>The Bengal tiger is found primarily in India with smaller populations in Bangladesh, Nepal, Bhutan, China and Myanmar.</p>
        </div>
        <div><p>The black spider monkey—also known as the Guiana or red-faced spider monkey—is found in eastern South America in areas north of the Amazon River. </p></div>
        <div><p>Sumatran elephants feed on a variety of plants and deposit seeds wherever they go, contributing to a healthy forest ecosystem.</p></div>
        <div><p>Dolphins are one of the oldest creatures in the world along with some species of turtles, crocodiles and sharks.</p></div>
      </px-tab-pages>
    </section>
  </template>
  <script>
    Polymer({
      is: 'demo-bare-tabs',
      properties: {
        selected: {
          type: String,
          reflect: true
        }
      },
      ready: function() {
        console.log('ready. ' + this.selected);
        var tabs = document.querySelector('#tab-set-bare');
        this.selected = 0;
      }
    });
  </script>
</dom-module>