IOS Theme

46 of 116
Change themes easily by changing the theme attribute on <zing-grid>. Choose from these built-in themes: Android, Black, Dark, or iOS. For the default theme, just omit the attribute (or set the value to default).
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      min-height: 400px;
    }

    zing-grid[loading] {
      height: 431px;
    }
  </style>
</head>

<body class="zg-body">

  <zing-grid caption="IOS Theme" src="https://cdn.zinggrid.com/datasets/dogs.json" editor="modal" editor-controls layout-controls pager page-size="4" theme="ios">
  </zing-grid>
  <script></script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body class="zg-body">
    
    <zing-grid 
      caption="IOS Theme" 
      src="https://cdn.zinggrid.com/datasets/dogs.json"
      editor="modal" 
      editor-controls
      layout-controls
      pager
      page-size="4"
      theme="ios">
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}

zing-grid[loading] { min-height:400px; }

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery