• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <!-- Polyfills only needed for Firefox and Edge. -->
      <script nonce="undefined" src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
    
      <!-- import zinggrid file -->
      <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
      <style>
        body {
          background: #FFF;
        }
    
        zing-grid[loading] {
          height: 800px;
        }
      </style>
    </head>
    
    <body>
    
      <script nonce="undefined" type="module">
        import {
          PolymerElement,
          html
        } from 'https://unpkg.com/@polymer/polymer@next/polymer-element.js?module';
        class MyComponent extends PolymerElement {
          static get properties() {
            return {
              datastore: {
                value: [{
                    "breed": "Dachshund",
                    "name": "Sousage"
                  },
                  {
                    "breed": "Corgi",
                    "name": "Plop"
                  },
                  {
                    "breed": "Pomeranian",
                    "name": "Floof"
                  }
                ]
              }
            }
          }
          static get template() {
            return html`<zing-grid caption="Hello Doggo" data$="{{datastore}}"></zing-grid>`
          }
    
        }
    
        customElements.define('my-component', MyComponent);
      </script>
    
      <my-component></my-component>
      <script></script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <!-- Polyfills only needed for Firefox and Edge. -->
      <script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
    
      <!-- import zinggrid file -->
      <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    </head>
    
    <body>
    
      <script type="module">
        import {
          PolymerElement,
          html
        } from 'https://unpkg.com/@polymer/polymer@next/polymer-element.js?module';
        class MyComponent extends PolymerElement {
          static get properties() {
            return {
              datastore: {
                value: [{
                    "breed": "Dachshund",
                    "name": "Sousage"
                  },
                  {
                    "breed": "Corgi",
                    "name": "Plop"
                  },
                  {
                    "breed": "Pomeranian",
                    "name": "Floof"
                  }
                ]
              }
            }
          }
          static get template() {
            return html`<zing-grid caption="Hello Doggo" data$="{{datastore}}"></zing-grid>`
          }
    
        }
    
        customElements.define('my-component', MyComponent);
      </script>
    
      <my-component></my-component>
    </body>
    
    </html>
    body {
      background: #FFF;
    }