• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8.  
    9.   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    10.   <style>
    11.     body {
    12.       background: #e6e6e6;
    13.     }
    14.  
    15.     .wrap {
    16.       margin: 0 auto;
    17.       max-width: 800px;
    18.       padding-top: 50px;
    19.     }
    20.  
    21.     zg-cell:nth-of-type(2) {
    22.       --zg-cell-background: #fffced;
    23.       border-left: 1px solid #fff0a3;
    24.       border-right: 1px solid #fff0a3;
    25.     }
    26.  
    27.     zing-grid[loading] {
    28.       height: 1725px;
    29.     }
    30.   </style>
    31. </head>
    32.  
    33. <body>
    34.  
    35.   <div class="wrap">
    36.     <zing-grid caption="ZGIcons w/ Font Awesome" icon-set="fontawesome">
    37.       <zg-data data='[
    38.           { "name": "cancel", "fontAwesome": "fa-times" },
    39.           { "name": "cancelrecord", "fontAwesome": "fa-times" },
    40.           { "name": "close", "fontAwesome": "fa-times" },
    41.           { "name": "checked", "fontAwesome": "fa-check-square" },
    42.           { "name": "checkmark", "fontAwesome": "fa-check" },
    43.           { "name": "delete", "fontAwesome": "fa-trash" },
    44.           { "name": "down", "fontAwesome": "fa-arrow-down" },
    45.           { "name": "error", "fontAwesome": "fa-exclamation-circle" },
    46.           { "name": "edit", "fontAwesome": "fa-edit" },
    47.           { "name": "editrecord", "fontAwesome": "fa-edit" },
    48.           { "name": "firstpage", "fontAwesome": "fa-angle-double-left" },
    49.           { "name": "fixedmenu", "fontAwesome": "fa-bars" },
    50.           { "name": "info", "fontAwesome": "fa-info-circle" },
    51.           { "name": "lastpage", "fontAwesome": "fa-angle-double-right" },
    52.           { "name": "layoutcard", "fontAwesome": "fa-th-large" },
    53.           { "name": "layoutrow", "fontAwesome": "fa-th-list" },
    54.           { "name": "link", "fontAwesome": "fa-link" },
    55.           { "name": "menu", "fontAwesome": "fa-ellipsis-v" },
    56.           { "name": "nextpage", "fontAwesome": "fa-angle-right" },
    57.           { "name": "outsidearrow", "fontAwesome": "fa-external-link-alt" },
    58.           { "name": "prevpage", "fontAwesome": "fa-angle-left" },
    59.           { "name": "reload", "fontAwesome": "fa-redo-alt" },
    60.           { "name": "remove", "fontAwesome": "fa-times" },
    61.           { "name": "removerecord", "fontAwesome": "fa-trash" },
    62.           { "name": "search", "fontAwesome": "fa-search" },
    63.           { "name": "submitrecord", "fontAwesome": "fa-check" },
    64.           { "name": "success", "fontAwesome": "fa-check-circle" },
    65.           { "name": "unchecked", "fontAwesome": "fa-square" },
    66.           { "name": "up", "fontAwesome": "fa-arrow-up" },
    67.           { "name": "warning", "fontAwesome": "fa-exclamation-triangle" },
    68.           { "name": "fa-smile-wink", "fontAwesome": "fa-smile-wink" }
    69.         ]'></zg-data>
    70.       <zg-colgroup>
    71.         <zg-column index="name" header="Icon Name"></zg-column>
    72.         <zg-column index="fontAwesome" header="Font Awesome"></zg-column>
    73.         <zg-column index="fontAwesome" header="Font Awesome">
    74.           <i class="fa [[index.fontAwesome]]"></i>
    75.         </zg-column>
    76.         <zg-column index="name" type="icon" align="center" width="150" header="ZG Icon"></zg-column>
    77.       </zg-colgroup>
    78.       <zg-source>
    79.         <zg-icon name="fa-smile-wink"></zg-icon>
    80.         <span>This sets ZGIcon to a FA name directly, no map lookup needed (&lt;zg-icon name="fa-smile-wink"&gt;&lt;/zg-icon&gt;).</span>
    81.         <br>
    82.         <zg-icon name="error"></zg-icon>
    83.         <zg-icon name="nextpage"></zg-icon>
    84.         <zg-icon name="delete"></zg-icon>
    85.         <zg-icon name="close"></zg-icon>
    86.         <span>These get mapped to FA equivalents.</span>
    87.       </zg-source>
    88.     </zing-grid>
    89.   </div>
    90.  
    91.   <script>
    92.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    93.   </script>
    94. </body>
    95.  
    96. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8.  
    9.   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    10. </head>
    11.  
    12. <body>
    13.  
    14.   <div class="wrap">
    15.     <zing-grid caption="ZGIcons w/ Font Awesome" icon-set="fontawesome">
    16.       <zg-data data='[
    17.           { "name": "cancel", "fontAwesome": "fa-times" },
    18.           { "name": "cancelrecord", "fontAwesome": "fa-times" },
    19.           { "name": "close", "fontAwesome": "fa-times" },
    20.           { "name": "checked", "fontAwesome": "fa-check-square" },
    21.           { "name": "checkmark", "fontAwesome": "fa-check" },
    22.           { "name": "delete", "fontAwesome": "fa-trash" },
    23.           { "name": "down", "fontAwesome": "fa-arrow-down" },
    24.           { "name": "error", "fontAwesome": "fa-exclamation-circle" },
    25.           { "name": "edit", "fontAwesome": "fa-edit" },
    26.           { "name": "editrecord", "fontAwesome": "fa-edit" },
    27.           { "name": "firstpage", "fontAwesome": "fa-angle-double-left" },
    28.           { "name": "fixedmenu", "fontAwesome": "fa-bars" },
    29.           { "name": "info", "fontAwesome": "fa-info-circle" },
    30.           { "name": "lastpage", "fontAwesome": "fa-angle-double-right" },
    31.           { "name": "layoutcard", "fontAwesome": "fa-th-large" },
    32.           { "name": "layoutrow", "fontAwesome": "fa-th-list" },
    33.           { "name": "link", "fontAwesome": "fa-link" },
    34.           { "name": "menu", "fontAwesome": "fa-ellipsis-v" },
    35.           { "name": "nextpage", "fontAwesome": "fa-angle-right" },
    36.           { "name": "outsidearrow", "fontAwesome": "fa-external-link-alt" },
    37.           { "name": "prevpage", "fontAwesome": "fa-angle-left" },
    38.           { "name": "reload", "fontAwesome": "fa-redo-alt" },
    39.           { "name": "remove", "fontAwesome": "fa-times" },
    40.           { "name": "removerecord", "fontAwesome": "fa-trash" },
    41.           { "name": "search", "fontAwesome": "fa-search" },
    42.           { "name": "submitrecord", "fontAwesome": "fa-check" },
    43.           { "name": "success", "fontAwesome": "fa-check-circle" },
    44.           { "name": "unchecked", "fontAwesome": "fa-square" },
    45.           { "name": "up", "fontAwesome": "fa-arrow-up" },
    46.           { "name": "warning", "fontAwesome": "fa-exclamation-triangle" },
    47.           { "name": "fa-smile-wink", "fontAwesome": "fa-smile-wink" }
    48.         ]'></zg-data>
    49.       <zg-colgroup>
    50.         <zg-column index="name" header="Icon Name"></zg-column>
    51.         <zg-column index="fontAwesome" header="Font Awesome"></zg-column>
    52.         <zg-column index="fontAwesome" header="Font Awesome">
    53.           <i class="fa [[index.fontAwesome]]"></i>
    54.         </zg-column>
    55.         <zg-column index="name" type="icon" align="center" width="150" header="ZG Icon"></zg-column>
    56.       </zg-colgroup>
    57.       <zg-source>
    58.         <zg-icon name="fa-smile-wink"></zg-icon>
    59.         <span>This sets ZGIcon to a FA name directly, no map lookup needed (&lt;zg-icon name="fa-smile-wink"&gt;&lt;/zg-icon&gt;).</span>
    60.         <br>
    61.         <zg-icon name="error"></zg-icon>
    62.         <zg-icon name="nextpage"></zg-icon>
    63.         <zg-icon name="delete"></zg-icon>
    64.         <zg-icon name="close"></zg-icon>
    65.         <span>These get mapped to FA equivalents.</span>
    66.       </zg-source>
    67.     </zing-grid>
    68.   </div>
    69.  
    70. </body>
    71.  
    72. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. .wrap {
    6.   margin: 0 auto;
    7.   max-width: 800px;
    8.   padding-top: 50px;
    9. }
    10.  
    11. zg-cell:nth-of-type(2) {
    12.   --zg-cell-background: #fffced;
    13.   border-left: 1px solid #fff0a3;
    14.   border-right: 1px solid #fff0a3;
    15. }
    1.