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>
    body {
      margin: 0;
    }
  </style>
​
</head>
<body>
  
  <dom-module id="x-list">
    <template>
      <style>
        :host {
          display: block;
          @apply(--layout-fullbleed); /* height: 100vh; margin: 0 */
          @apply(--layout-vertical); /* display: flex; flex-direction: column; */
        }
        
        app-toolbar {
          background-color: #4285f4;
          color: white;
        }
​
        iron-list {
          background-color: #ddd;
          @apply(--layout-flex-auto); /* flex: 1 1 auto; */
        }
        
        .item {
          border-bottom: 1px solid #eee;
          height: 20vh;
        }
      </style>
​
      <app-toolbar>App name</app-toolbar>
      <iron-list items="[[items]]">
        <template>
          <div class="item">Item [[index]]</div>
        </template>
      </iron-list>
    </template>
  </dom-module>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-list',
        properties: {
          items: {
            type: Array,
            value: function() {
              return [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