IOS Theme

54 of 125

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).

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/HBUMSP8Q

Result Full HTML CSS JS

Edit Download

Full Code

<!DOCTYPE html>
<html>

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

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

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

<body class="zg-body">

  <zing-grid caption="IOS Theme" editor="modal" editor-controls layout-controls pager page-size="4" theme="ios" data='[
        {
          "name": "Zeus",
          "breed": "Great Dane"
        },
        {
          "name": "Koda",
          "breed": "breed"
        },
        {
          "name": "Ziva",
          "breed": "Cane Corso"
        },
        {
          "name": "Doug",
          "breed": "Pug"
        },
        {
          "name": "Jenny",
          "breed": "Corgi"
        },
        {
          "name": "Rico",
          "breed": "Golden Retriever"
        }
      ]'>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </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"></script>
  </head>
  <body class="zg-body">
    
    <zing-grid 
      caption="IOS Theme"
      editor="modal" 
      editor-controls
      layout-controls
      pager
      page-size="4"
      theme="ios"
      data='[
        {
          "name": "Zeus",
          "breed": "Great Dane"
        },
        {
          "name": "Koda",
          "breed": "breed"
        },
        {
          "name": "Ziva",
          "breed": "Cane Corso"
        },
        {
          "name": "Doug",
          "breed": "Pug"
        },
        {
          "name": "Jenny",
          "breed": "Corgi"
        },
        {
          "name": "Rico",
          "breed": "Golden Retriever"
        }
      ]'>
    </zing-grid>
  </body>
</html>

.zg-body {background:#e6e6e6;}

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

// No JS code

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

IOS Theme

Full Code

Related Docs

Related Docs

Demo Gallery