Scaffold
The page's viewport box: full height, safe areas, scroll policy and the overflow boundary.
Also written Frame; layr format rewrites these to Scaffold.
A page with a bar, a body and a footer
Scaffold is the page's frame: full height, the safe areas, the scroll policy and the three places a page is made of. .bar stays at the top while the page scrolls, .body is the content, and .footer sits at the end. textColor is the colour every Text uses unless it sets its own.
Page(
.name(Home)
.route('/')
Scaffold(
.config(color: canvas, textColor: ink)
.bar(
Row(
.config(
w: fill
.border(color: line, width: 1, sides: bottom)
color: panel
padding: sym(x: 20, y: 14)
xAlign: between
yAlign: mid
)
Text(.config(weight: semibold) .obj('Studio'))
Text(.config(color: muted) .obj('Sign in'))
)
)
.body(
Column(
.config(w: fill, gap: 12, padding: all(20))
Text(.config(size: 28, type: h1, weight: semibold) .obj('Book a room'))
Text(
.config(color: muted)
.obj(
'The bar is sticky: on a long page it stays on top as you scroll.'
)
)
Container(.config(w: fill, h: 180, color: panel, cornerRadius: 14))
Container(.config(w: fill, h: 180, color: panel, cornerRadius: 14))
)
)
.footer(
Container(
.config(w: fill, padding: all(20))
.obj(Text(.config(size: 13, color: faint) .obj('© Studio')))
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
color (colorBG, bg, background) | paint | Page background. | |
textColor (fg, foreground) | color | The page's text colour: every Text without its own color uses it. Without it, text follows the colour scheme (dark text on light, light on dark). | |
scroll | y | none | y | y scrolls the page (default); none makes a fixed, app-like screen. |
fit | width | contain | cover | canvas | Design Scale fit: width (default for scrolling), contain (default for fixed screens), cover or canvas. | |
padding | insets | Space inside the page. | |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |
Slots
.bar: one object.body: one object, the default slot.footer: one object