• Edit
  • Download
  • <!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" defer></script>
        <style>
            body {
                background: #FFF;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </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>
        <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" defer></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; }