Change layout and font size at breakpoints
Problem
You want to responsively change the layout or size of your application components based on the user’s viewport (desktop, tablet, mobile, etc).
Solution
- Select the Container or Iterator that you would like to change the layout of
- Find the property that you’d like to make responsive, such as the Layout » Direction property
- Click the property, thereby expanding the custom code window
- In the custom code window, use
$app.viewportWidth
and$breakpoint
to make your layout responsive. For example, to change the stack direction from horizontal to vertical when on tablet devices and below, you can use:
{{ $app.viewportWidth < $breakpoint.Tablet ? "VERTICAL_STACK" : "HORIZONTAL_STACK" }}
Or if you want to change the font size of a Text component, set its Font Size to:
{{ $app.viewportWidth < $breakpoint.Tablet ? "sm" : "md" }}
Discussion
- Dynaboard gives you programmatic control over your breakpoint logic.
$app.viewportWidth
and$app.viewportHeight
return numbers, so you can compare them against any value you’d like, like1337
. - The built-in
$breakpoint
values are:
const $breakpoint = {
Mobile: 320,
Tablet: 768,
Laptop: 1024,
Desktop: 1280
}
- Use the Stack mode for Page and Container to make them respond to the size of their contents. Grid mode works best for designing responsive components and simpler pages.
Known Limitations
- Dynaboard does not currently support other
@media
queries than based on$app.viewportWidth
and$app.viewportHeight