<link rel="import" href="../paper-tabs.html">
<link rel="import" href="../paper-tab.html">

<link rel="import" href="../../iron-pages/iron-pages.html">

<link rel="import" href="paper-tabs-demo-styles.html">

<dom-module is="tabs-with-content-example">
  <template>
    <style include="paper-tabs-demo-styles"></style>
    <style>
      iron-pages {
        border: 1px solid #ccc;
        border-top: none;
        padding: 8px;
      }
    </style>
    <paper-tabs selected="{{selected}}">
      <paper-tab>ITEM ONE</paper-tab>
      <paper-tab>ITEM TWO</paper-tab>
      <paper-tab>ITEM THREE</paper-tab>
    </paper-tabs>
    <iron-pages selected="{{selected}}">
      <div>CONTENT ONE</div>
      <div>CONTENT TWO</div>
      <div>CONTENT THREE</div>
    </iron-pages>
  </template>
  <script>
    Polymer({
      is: 'tabs-with-content-example',
      properties: {
        selected: {
          type: Number,
          value: 0
        }
      }
    });
  </script>
</dom-module>
