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>
  
  <title>Monostate Layout Notifier</title>
  
  <style>
    body {
      font-family: 'Helvetica Neue', Arial, Roboto, Helvetica, sans-serif;
    }
    tabs-with-grid {
      width: 600px;
      height: 400px;
    }
  </style>
  
  <script src="http://www.polymer-project.org/components/platform/platform.js"></script>
  
  <link rel="import" href="http://www.polymer-project.org/components/polymer-ui-tabs/polymer-ui-tabs.html">
  <link rel="import" href="http://www.polymer-project.org/components/polymer-ui-pages/polymer-ui-pages.html">
  <link rel="import" href="http://www.polymer-project.org/components/polymer-grid-layout/polymer-grid-layout.html">
  <link rel="import" href="http://www.polymer-project.org/components/polymer-layout/polymer-layout.html">
  
</head>
<body style="background-color:green;">
  
  <!-- <my-grid></my-grid> -->
  <tabs-with-grid></tabs-with-grid>
  
<!-- A test grid w purty colours-->
  
  <polymer-element name="my-grid">
    <template>
​
      <style>
        heading {
          background-color: lightgreen;
          border: 5px solid orange;
        }
        main {
          background-color: pink;
          border: 5px solid brown;
        }
        panel {
          background-color: yellow;
          border: 5px solid blue;
        }
      </style>
    
      <polymer-grid-layout id="gridLayout"  layout="{{layout}}"></polymer-grid-layout>          
      <heading>Heading One</heading>
      <panel flex></panel>
      <main>Main Content</main>
    
    </template>
    
    <script>
​
      Polymer('my-grid', {
        ready: function() {
         this.layout=[[1, 2, 2], [3, 3, 3]];
        }
      })
​
    </script>
  </polymer-element>     
​
<!-- An attempt to shove the grid into a tab -->
  
  <polymer-element name="tabs-with-grid" attributes="selectedTab">
    <template>
​
      <polymer-layout vertical></polymer-layout>
      
      <div>
        <polymer-layout></polymer-layout>
        <polymer-ui-tabs selected="{{selectedTab}}">
          <span>One</span>
          <span>Two</span>
        </polymer-ui-tabs>
        <div flex></div>
      </div>
      
      <polymer-ui-pages selected="{{selectedTab}}">
        <div >
          <my-grid ></my-grid>
        </div>
        <div>Page Two</div>
      </polymer-ui-pages>
      
    </template>
    
    <script>
​
      Polymer('tabs-with-grid', {
        ready: function() {
          this.selectedTab = 0;
        }
      });
​
    </script>
  </polymer-element>     
​
  
  
  
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
Andersmholmgrenpro
0viewers