Layout

Views use the Stack component as the building block of layout. A stack can be used to create simple vertical or horizontal flows as well as more complex layouts likes grids and dashboards.

Layout basics

The simplest (and most common) layout is a vertical flow with spacing in between.
Loading view...
Components can be laid out horizontally for a layout that flows side-to-side
Loading view...

Nesting layouts

More complex layouts can be achieved by nesting stacks.
In the following example, a column (vertical) stack lays out individual cards, while a row (horizontal) stack lays out the components within each card.
Loading view...

Common layout patterns

Vertical flow

The simplest layout. Components flow vertically from top to bottom.
Loading view...

Horizontal flow

Horizontal flows are usually small bits of layout that group elements together on the same line.
In the following example, a horizontal header contains a title two header buttons. A search component follows which includes a button and input next to each other.
Loading view...

Main detail

The main content of the page is a table. Its width is set to auto so it always grows to fill all available space.
When you select a row, a detail section pops up. If the screen is sm or larger, the detail section takes up 30% of the screen (leaving the other 70% for the main table). On xs screens, the detail section takes up 100% of a row, pushing it below the table.
Loading view...

Grid

All components are given 50% of the screen, regardless of their initial size. On xs screens, components take up 100% of the row.
Loading view...
Adjust the width to create an NxN grid of any shape.

Dashboard

All components have the default width of content, so they are at least as wide as their content. The root stack has grow which forces all components to grow to fill up their entire row. As rows fill up, the components automatically wrap around onto the next row.
Loading view...
Any components that you want to add a larger width to can have their width set, otherwise the stack will automatically lay the components out.
Try decreasing the window size. Since components automatically wrap, the grid will eventually turn into a vertical flow where each component takes up 100% of its row.

Responsive widths

You can customize a layout for different size screens using built-in breakpoints in a <Stack>. Each breakpoint renders a different layout for a different sized screen.
Available breakpoints include:
  • xs: 0px and up
  • sm: 768px and up
  • md: 992px and up
  • lg: 1200px and up
  • xl: 1400px and up
A breakpoint matches if the screen size is greater than or equal to the breakpoint. The largest breakpoint that matches is applied.
For example, A 1000px screen matches xs, sm and md. If you set the width of a component to {xs: 100%, md: 50%}, the md value will be chosen since it is the largest breakpoint that matches.
In the following example, each component has a 33% width if the screen is size sm or larger, and 100% if the screen is size xs. Try decreasing the size of your window and watch the components expand to fill 100% of the row.
Loading view...
If the components in a row stack grow too large to fit in a row, they will automatically wrap around onto the next row. Breakpoints are not always necessary because this wrapping behavior ensures that content fits even if breakpoints are not set.