Overlay
Content above the page (dialogs, popovers, sheets) with focus management. Unstyled.
Also written Dialog, Popover, Modal; layr format rewrites these to Overlay.
A dialog
Overlay shows content above the page, with focus moved into it and back when it closes. It is shown while open is true; modal: true (the default) blocks the page behind it, and dismissible: true (the default) closes it on Escape or a click on the backdrop, raising close. It is unstyled: its .obj is the dialog you draw.
Page(
.name(Dialog)
.route('/')
var bool open = false
Scaffold(
.config(color: canvas)
.body(
Column(
.config(gap: 12, padding: all(24))
Button(
.preset(default)
.config(label: 'Cancel booking')
.fnc { open = true }
)
Overlay(
.config(label: 'Cancel booking', open: open)
.on(close: { open = false })
.obj(
Container(
.config(
w: 300
color: panel
cornerRadius: 16
padding: all(20)
shadow: shadow(y: 16, blur: 40, color: black.alpha(25%))
)
.obj(
Column(
.config(gap: 12)
Text(
.config(size: 18, weight: semibold)
.obj('Cancel this booking?')
)
Text(
.config(color: muted)
.obj('Room B, Tuesday 10:30. This cannot be undone.')
)
Row(
.config(w: fill, gap: 8, xAlign: end)
Button(
.preset(default)
.config(label: 'Keep it')
.fnc { open = false }
)
Button(
.config(
color: danger
cornerRadius: 8
padding: sym(x: 14, y: 8)
)
.fnc { open = false }
.obj(
Text(
.config(color: onAccent, weight: semibold)
.obj('Cancel')
)
)
)
)
)
)
)
)
)
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
w (width) | len | fill | hug | Width: a length, fill (share the remaining space) or hug (fit content, default). | |
h (height) | len | fill | hug | Height: a length, fill or hug (default). | |
size (s) | size | Width and height together: size: 200 or size: (200, 120). | |
minW (minWidth) | len | Minimum width. | |
maxW (maxWidth) | len | Maximum width. | |
minH (minHeight) | len | Minimum height. | |
maxH (maxHeight) | len | Maximum height. | |
aspect (aspectRatio) | num | Aspect ratio (width / height), e.g. 16/9. | |
color (bg, background, colorBG) | paint | Background paint: a colour or gradient. | |
padding (pad) | insets | Space inside the object. | |
cornerRadius (radius, borderRadius, corner) | radius | Corner radius: one length or only(topLeft: 8, …). | |
borderWidth | len | Border width. | |
borderColor | color | Border colour. | |
borderAlign | in | mid | out | in | Where the border sits relative to the edge: in, mid or out. |
borderStyle | solid | dashed | dotted | solid | Border line style. |
borderSides | all | top | bottom | left | right | x | y | all | Which sides draw the border (inside the box). |
shadow | shadow | Drop shadow(s): shadow(y: 4, blur: 12, color: black.alpha(20%)). | |
clip | bool | Clip children to the object's bounds (and corner radius). | |
z | int | Stacking order among siblings. | |
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). | |
open | bool | Whether it is shown. | |
modal | bool | true | Blocks the page and traps focus. |
dismissible | bool | true | Escape and backdrop click close it. |
label | txt | Accessible name. | |
placement | align | mid | Where it appears. |
backdrop | paint | Backdrop paint for modal overlays. |
Group .border(align, color, width, style, sides): Border settings grouped: .border(align: in, color: #0d0d0d, width: 2).
Slots
.obj: one object, the default slot
Events
.on(...) accepts tap, press, hover, hoverEnd, focus, blur, key, drag, swipe, mount, unmount, visible, close.