• 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 zing-grid[loading] {
    10.       height: 400px;
    11.     }
    12.  
    13.     .zg-body zg-caption {
    14.       background: inherit;
    15.       border-bottom: 1px solid #c0c0c0;
    16.     }
    17.  
    18.     .zg-body .caption-pager--container,
    19.     zg-footer {
    20.       display: flex;
    21.       justify-content: space-between;
    22.     }
    23.  
    24.     .zg-body zg-footer {
    25.       border-top: 1px solid #c0c0c0;
    26.       padding: 1rem;
    27.       font-size: var(--zg-caption-font-size, 1.25rem);
    28.     }
    29.  
    30.     .zg-body zg-footer zg-icon {
    31.       font-size: 1.25rem;
    32.     }
    33.  
    34.     .zg-body zg-text,
    35.     span {
    36.       color: black;
    37.     }
    38.  
    39.     @media (max-width: 600px) {
    40.  
    41.       .zg-body zg-caption,
    42.       .zg-body zg-footer {
    43.         font-size: 0.9rem;
    44.       }
    45.     }
    46.  
    47.     zing-grid[loading] {
    48.       height: 336px;
    49.     }
    50.   </style>
    51. </head>
    52.  
    53. <body class="zg-body">
    54.   <zing-grid page-size="3" page-size-options="2,5,20" page-size-card="2" src="https://zinggrid-examples.firebaseio.com/movies/" layout="row" layout-controls="disabled" viewport-stop>
    55.     <zg-caption>
    56.       <div class="caption-pager--container">
    57.         <div>
    58.           <span>Showing</span>
    59.           <zg-text value="startrow"></zg-text>
    60.           <span>-</span>
    61.           <zg-text value="endrow"></zg-text>
    62.           <span>of</span>
    63.           <zg-text value="rowcount"></zg-text>
    64.           <span>items</span>
    65.         </div>
    66.         <div>
    67.           <span>Showing</span>
    68.           <zg-select action="pagesize" options="3, 6, 9"></zg-select>
    69.           <span>items</span>
    70.         </div>
    71.       </div>
    72.     </zg-caption>
    73.  
    74.     <zg-footer>
    75.       <div>
    76.         <span>Showing</span>
    77.         <zg-text value="currpage"></zg-text>
    78.         <span>-</span>
    79.         <zg-text value="pagecount"></zg-text>
    80.         <span>of</span>
    81.         <zg-text value="pagecount"></zg-text>
    82.         <span>rows</span>
    83.       </div>
    84.       <div>
    85.         <zg-button action="prevpage"></zg-button>
    86.         <zg-text value="currpage"></zg-text>
    87.         <zg-button action="nextpage"></zg-button>
    88.       </div>
    89.     </zg-footer>
    90.   </zing-grid>
    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 Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <zing-grid page-size="3" page-size-options="2,5,20" page-size-card="2" src="https://zinggrid-examples.firebaseio.com/movies/" layout="row" layout-controls="disabled" viewport-stop>
    12.     <zg-caption>
    13.       <div class="caption-pager--container">
    14.         <div>
    15.           <span>Showing</span>
    16.           <zg-text value="startrow"></zg-text>
    17.           <span>-</span>
    18.           <zg-text value="endrow"></zg-text>
    19.           <span>of</span>
    20.           <zg-text value="rowcount"></zg-text>
    21.           <span>items</span>
    22.         </div>
    23.         <div>
    24.           <span>Showing</span>
    25.           <zg-select action="pagesize" options="3, 6, 9"></zg-select>
    26.           <span>items</span>
    27.         </div>
    28.       </div>
    29.     </zg-caption>
    30.  
    31.     <zg-footer>
    32.       <div>
    33.         <span>Showing</span>
    34.         <zg-text value="currpage"></zg-text>
    35.         <span>-</span>
    36.         <zg-text value="pagecount"></zg-text>
    37.         <span>of</span>
    38.         <zg-text value="pagecount"></zg-text>
    39.         <span>rows</span>
    40.       </div>
    41.       <div>
    42.         <zg-button action="prevpage"></zg-button>
    43.         <zg-text value="currpage"></zg-text>
    44.         <zg-button action="nextpage"></zg-button>
    45.       </div>
    46.     </zg-footer>
    47.   </zing-grid>
    48. </body>
    49.  
    50. </html>
    1. .zg-body zing-grid[loading] {
    2.   height: 400px;
    3. }
    4.  
    5. .zg-body zg-caption {
    6.   background: inherit;
    7.   border-bottom: 1px solid #c0c0c0;
    8. }
    9.  
    10. .zg-body .caption-pager--container,
    11. zg-footer {
    12.   display: flex;
    13.   justify-content: space-between;
    14. }
    15.  
    16. .zg-body zg-footer {
    17.   border-top: 1px solid #c0c0c0;
    18.   padding: 1rem;
    19.   font-size: var(--zg-caption-font-size, 1.25rem);
    20. }
    21.  
    22. .zg-body zg-footer zg-icon {
    23.   font-size: 1.25rem;
    24. }
    25.  
    26. .zg-body zg-text,
    27. span {
    28.   color: black;
    29. }
    30.  
    31. @media (max-width: 600px) {
    32.  
    33.   .zg-body zg-caption,
    34.   .zg-body zg-footer {
    35.     font-size: 0.9rem;
    36.   }
    37. }
    1.