Docs

Viewport

The viewport attribute automatically changes its value based on the current width of the grid, according to internal presets. Similar to the native @media CSS directive (albeit only in the horizontal), it changes based on the width of the grid, not the device. This is important so that we can show card layout-mode for grids in short-width columns, even in a max-width browser window.

Automatic Breakpoints

The value of viewport changes as the width of the grid changes. You can use these breakpoints when styling your custom grids, or create your own using the [viewport-types=''] config. Currently, there are 5 built-in breakpoints:

  • mobile - 0 to 550px
  • tablet-portrait - 551px to 1023px
  • tablet-landscape - 1024px to 1199px
  • desktop - 1200px to 1399px
  • desktop-large - 1400px+
Top

Pause Viewport Switching

Add viewport-pause to the grid to pause the automatic-switching of the viewport (see below). This locks the grid into the current viewport breakpoint no matter the width of the grid moving forward. Remove the attribute to resume the normal, automatic breakpoint switching.

<zing-grid viewport-pause></zing-grid>

You can set viewport-pause to keep the current value of viewport (even on refresh), but resizing the device will not update the attribute value, thus freezing the breakpoint until you remove the viewport-pause attribute. If your intention is to avoid viewport switching completely, use viewport-stop (listed below).

Viewport Paused Grid

Here is a complete grid with the viewport paused:

Top

Stop Viewport Switching

Add viewport-stop to the grid to stop the automatic-switching of the viewport (see below). Like viewport-pause, this will prevent the grid from automatically switching the viewport when it is resized. But unlike it, it also removes the viewport attribute instead of just locking it. This is a subtle difference, but it should give you flexibility in handling your custom styling.

<zing-grid viewport-stop></zing-grid>

If viewport-stop is added before render, the grid is locked into the normal layout mode (if the width is naturally small, it will start in card mode). If [layout="card"] or [layout="row"] was also added, it would lock into those viewports instead. If viewport-stop is added after render, the grid retains the layout mode at the time it was rendered.

Viewport Stopped Grid

Here is a complete grid with viewport stopped:

Top

Custom Breakpoints

Define your own breakpoints using a viewport-types attribute on the <zing-grid> tag (see below). The value must be valid JSON, so use single-quotes for the attribute wrapper. You will have to style the grid based on the viewport selector.

<zing-grid viewport-types='{
  "a": 300,
  "b": 400,
  "mobile": 500,
  "c": 600,
  "max": null
}'
></zing-grid>

<style>
  [viewport="a"] zg-caption { background: green; }
  [viewport="b"] zg-caption { background: blue; }
  [viewport="c"] zg-caption { background: red; }
  [viewport="max"] zg-caption { background: orange; }
></style>

If you want the grid to automatically switch to card layout-mode (<zing-grid layout="card">), you must define one of your breakpoints with the name mobile. Internally, ZingGrid looks for [viewport="mobile"] to know when to switch from row to card mode if layout is not manually added.

Custom Viewport Breakpoints Grid

Here is a complete grid with custom breakpoints for resizing:

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: viewport]