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>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
​
  <base href="http://polygit.org/components/">
  
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  
  <link href="polymer/polymer.html" rel="import">
  <link href="app-layout/app-toolbar/app-toolbar.html" rel="import">
  <link href="iron-flex-layout/iron-flex-layout.html" rel="import">
  <link href="iron-list/iron-list.html" rel="import">
​
  <style is="custom-style">
     body {
      @apply(--layout-fullbleed); /* height: 100vh; margin: 0 */
      @apply(--layout-vertical);  /* display: flex; flex-direction: column; */
    }
​
    app-toolbar {
      background-color: #4285f4;
      color: white;
      z-index: 1;
      @apply(--layout-fixed-top); /* position: fixed; top: 0; left: 0; right: 0; */
    }
​
    iron-list {
      /* add padding since the app-toolbar is fixed at the top */
      padding-top: 64px;
    }
    
    .item {
      border-bottom: 1px solid #eee;
      height: 20vh;
    }
    
  </style>
​
</head>
<body>
  
  <template id="scope" is="dom-bind">
    <app-toolbar>App name</app-toolbar>
    <iron-list scroll-target="document" items="[[items]]">
      <template>
        <div class="item">Item [[index]]</div>
      </template>
    </iron-list>
  </template>
  
  <script>
    
    document.querySelector('#scope').items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ];
   
  </script>
  
  <x-list></x-list>
​
​
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
blastenpro
0viewers