• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Internal Icons</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid {
    14.       --zg-card-columns: 25%;
    15.     }
    16.  
    17.     zg-card {
    18.       align-items: center;
    19.       display: flex;
    20.       justify-content: space-between;
    21.     }
    22.  
    23.     zg-card strong {
    24.       font-weight: 500;
    25.     }
    26.  
    27.     zg-card zg-icon {
    28.       margin-left: 6px;
    29.     }
    30.  
    31.     zg-card zg-icon {
    32.       height: 22px;
    33.       width: 22px;
    34.     }
    35.  
    36.     zg-body[viewport="tablet-portrait"][layout="card"] {
    37.       --zg-card-columns: 33%;
    38.     }
    39.  
    40.     zing-grid[loading] {
    41.       height: 619px;
    42.     }
    43.   </style>
    44. </head>
    45.  
    46. <body>
    47.  
    48.   <zing-grid compact layout="card">
    49.     <zg-data data='[
    50. 				{ "type": "cancel" },
    51.         { "type": "cancelrecord" },
    52.         { "type": "checked" },
    53.         { "type": "checkmark" },
    54.         { "type": "close" },
    55.         { "type": "createrecord" },
    56.         { "type": "down" },
    57.         { "type": "edit" },
    58.         { "type": "editrecord" },
    59.         { "type": "error" },
    60.         { "type": "error-tmp" },
    61.         { "type": "firstpage" },
    62.         { "type": "fixedmenu" },
    63.         { "type": "info" },
    64.         { "type": "lastpage" },
    65.         { "type": "layoutcard" },
    66.         { "type": "layoutrow" },
    67.         { "type": "link" },
    68.         { "type": "menu" },
    69.         { "type": "nextpage" },
    70.         { "type": "outsidearrow" },
    71.         { "type": "prevpage" },
    72.         { "type": "reload" },
    73.         { "type": "remove" },
    74.         { "type": "removerecord" },
    75.         { "type": "search" },
    76.         { "type": "submitrecord" },
    77.         { "type": "success" },
    78.         { "type": "unchecked" },
    79.         { "type": "up" },
    80.         { "type": "warning" }
    81.     	]'></zg-data>
    82.     <zg-colgroup>
    83.       <zg-column index="type"></zg-column>
    84.       <zg-column index="type" renderer="iconrender"></zg-column>
    85.     </zg-colgroup>
    86.     <zg-card renderer="iconrender2"></zg-card>
    87.   </zing-grid>
    88.  
    89.   <script>
    90.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    91.  
    92.     function iconrender(value, $cell, event) {
    93.       return `<zg-icon name="${value}"></zg-icon>`;
    94.     }
    95.  
    96.     function iconrender2(data, $cell, event) {
    97.       return `<strong>${data.type}</strong> <zg-icon name="${data.type}"></zg-icon>`;
    98.     }
    99.   </script>
    100. </body>
    101.  
    102. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Internal Icons</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.  
    12.   <zing-grid compact layout="card">
    13.     <zg-data data='[
    14. 				{ "type": "cancel" },
    15.         { "type": "cancelrecord" },
    16.         { "type": "checked" },
    17.         { "type": "checkmark" },
    18.         { "type": "close" },
    19.         { "type": "createrecord" },
    20.         { "type": "down" },
    21.         { "type": "edit" },
    22.         { "type": "editrecord" },
    23.         { "type": "error" },
    24.         { "type": "error-tmp" },
    25.         { "type": "firstpage" },
    26.         { "type": "fixedmenu" },
    27.         { "type": "info" },
    28.         { "type": "lastpage" },
    29.         { "type": "layoutcard" },
    30.         { "type": "layoutrow" },
    31.         { "type": "link" },
    32.         { "type": "menu" },
    33.         { "type": "nextpage" },
    34.         { "type": "outsidearrow" },
    35.         { "type": "prevpage" },
    36.         { "type": "reload" },
    37.         { "type": "remove" },
    38.         { "type": "removerecord" },
    39.         { "type": "search" },
    40.         { "type": "submitrecord" },
    41.         { "type": "success" },
    42.         { "type": "unchecked" },
    43.         { "type": "up" },
    44.         { "type": "warning" }
    45.     	]'></zg-data>
    46.     <zg-colgroup>
    47.       <zg-column index="type"></zg-column>
    48.       <zg-column index="type" renderer="iconrender"></zg-column>
    49.     </zg-colgroup>
    50.     <zg-card renderer="iconrender2"></zg-card>
    51.   </zing-grid>
    52.  
    53. </body>
    54.  
    55. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. zing-grid {
    6.   --zg-card-columns: 25%;
    7. }
    8.  
    9. zg-card {
    10.   align-items: center;
    11.   display: flex;
    12.   justify-content: space-between;
    13. }
    14.  
    15. zg-card strong {
    16.   font-weight: 500;
    17. }
    18.  
    19. zg-card zg-icon {
    20.   margin-left: 6px;
    21. }
    22.  
    23. zg-card zg-icon {
    24.   height: 22px;
    25.   width: 22px;
    26. }
    27.  
    28. zg-body[viewport="tablet-portrait"][layout="card"] {
    29.   --zg-card-columns: 33%;
    30. }
    1. function iconrender(value, $cell, event) {
    2.   return `<zg-icon name="${value}"></zg-icon>`;
    3. }
    4.  
    5. function iconrender2(data, $cell, event) {
    6.   return `<strong>${data.type}</strong> <zg-icon name="${data.type}"></zg-icon>`;
    7. }