This section illustrates how to lay out cards on a page.
Wave support two layout systems out of the box: a grid layout and a flex (flexible) layout.
By default, pages use the grid-based system. The grid-based system is simpler to use, and ensures that your page layout looks exactly the same on every display, without surprises.
To switch to a flex layout, simply define a page layout using the
ui.layout() API, as shown below.
The flex layout system allows you to build user interfaces and dashboards that adapt to various device and screen sizes ("responsive layout").
To view examples of flex and responsive layouts in actions, see https://github.com/h2oai/wave/tree/master/py/demo
To define a layout for your page, attach a layout to your page's meta card using
The following example defines a simple layout consisting of a header, a body and a footer. The body, in turn, is split horizontally into a content area and a sidebar.
A layout, at a minimum, consists of a
breakpoint and a set of
breakpoint is the minimum viewport (browser) width at which the layout will be applied to the page. Values must be pixel widths (e.g.
768px) or a named preset. The named presets are:
0pxfor extra small devices (portrait phones)
576pxfor small devices (landscape phones)
768pxfor medium devices (tablets)
992pxfor large devices (desktops)
1200pxfor extra large devices (large desktops).
A breakpoint value of
xs matches all viewport widths, unless other breakpoints are set.
A zone is a named area inside the layout where cards can be placed. A zone is defined using
Zones have a
ui.ZoneDirection.COLUMN (with children laid out top to bottom) or
ui.ZoneDirection.ROW (with children laid out left to right).
Zone can define a
size, which translates to the zone's width in case the zone is laid out horizontally, or the zone's height in case the zone is laid out vertically.
Zones can have other zones nested inside them.
In the above example, the
sidebar zones are laid out horizontally inside the
body, with the
content zone taking up 75% of the available width, and the sidebar taking up 25%.
To make your page adapt to multiple viewport sizes, define multiple layouts using
To place a card inside a zone in your layout, use the card's
The simplest way to assign a card to a zone is to set the
box to the name of zone:
For more control over how the card is placed, use
Make the card the third item in the sidebar:
Make the card take up two parts of available space:
Make cards take up available space in a 10:5:4 ratio:
Make the card 200px wide:
Make the card 300px high:
Make the card 200px wide and 300px high:
For responsive layouts, specify multiple boxes using
ui.boxes() refers to the corresponding
ui.layout() specified at the page level.
By default, every page has a grid system in place, designed to fit HD displays (1920 x 1080 pixels). The grid has 12 columns and 10 rows. A column is 134 pixels wide. A row is 76 pixels high. The gap between rows and columns is set to 15 pixels.
Every card has a
box attribute that specifies how to position the card on the page, a string of the form
'column row width height', for example
'1 1 2 4' or
'8 7 3 6'.
row indicate which column and row to position the top-left corner of the card. The
height indicate the width and height of the cards, respectively. The
row are 1-based. The
height are in spans (units) of columns or rows.
|width||N||N columns wide|
|height||N||N rows high|
For example, a
1 2 3 4 is interpreted as:
|width||3||3 columns wide|
|height||4||4 rows high|
The default grid is designed to fit HD displays (1920 x 1080 pixels), so if you want your page to fit smaller displays, don't use up the entire grid. Instead, use up less columns and rows, like 8 columns x 6 rows.