• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .zg-body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     .zg-body button {
    14.       border: 0;
    15.       border-radius: 5px;
    16.       color: white;
    17.       background: #85929E;
    18.       font-size: 15px;
    19.       margin-bottom: 20px;
    20.     }
    21.  
    22.     .zg-body img {
    23.       margin-top: 20px;
    24.     }
    25.  
    26.     zing-grid[loading] {
    27.       height: 307px;
    28.     }
    29.   </style>
    30. </head>
    31.  
    32. <body class="zg-body">
    33.   <zing-grid>
    34.     <zg-caption>
    35.       <img src="https://app.zinggrid.com/api/file/Q1FERVLM/corgi.png" width="50px">
    36.       This caption has images and a button!
    37.       <img src="https://app.zinggrid.com/api/file/Q1FERVLM/corgi.png" width="50px">
    38.       <button>Woof!</button>
    39.     </zg-caption>
    40.     <zg-data data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]'></zg-data>
    41.   </zing-grid>
    42.   <script>
    43.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    44.   </script>
    45. </body>
    46.  
    47. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <zing-grid>
    12.     <zg-caption>
    13.       <img src="https://app.zinggrid.com/api/file/Q1FERVLM/corgi.png" width="50px">
    14.       This caption has images and a button!
    15.       <img src="https://app.zinggrid.com/api/file/Q1FERVLM/corgi.png" width="50px">
    16.       <button>Woof!</button>
    17.     </zg-caption>
    18.     <zg-data data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]'></zg-data>
    19.   </zing-grid>
    20. </body>
    21.  
    22. </html>
    1. .zg-body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. .zg-body button {
    6.   border: 0;
    7.   border-radius: 5px;
    8.   color: white;
    9.   background: #85929E;
    10.   font-size: 15px;
    11.   margin-bottom: 20px;
    12. }
    13.  
    14. .zg-body img {
    15.   margin-top: 20px;
    16. }
    1.