Position
Offsets an object inside a Stack by x/y, pins it to edges, or keeps it in view with sticky: true. Negative values are allowed.
Also written Positioned; layr format rewrites these to Position.
A badge on a corner
Inside a Stack, Position pins its object to edges (top, right, bottom, left) or offsets it by x/y. Negative values are allowed: here the badge hangs over the corner.
Stack(
.config(w: 240, h: 140)
Container(
.config(
w: fill
h: fill
.border(color: line, width: 1)
color: panel
cornerRadius: 14
)
.obj(Mid(Text(.config(color: muted) .obj('Messages'))))
)
Position(
.config(right: -8, top: -8)
.obj(
Container(
.config(size: 28, color: accent, cornerRadius: 999, objAlign: mid)
.obj(
Text(.config(size: 13, color: onAccent, weight: semibold) .obj('3'))
)
)
)
)
)Stretching between edges
Pinning two opposite edges stretches the object between them.
Stack(
.config(w: 280, h: 120, color: sunken, cornerRadius: 12)
Position(
.config(bottom: 16, left: 16, right: 16)
.obj(Container(.config(w: fill, h: 36, color: accent, cornerRadius: 8)))
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
x | len | Horizontal offset from where the object would sit. | |
sticky | bool | Stays in view while its scroll container scrolls, held at the given edges (top: 0 by default). | |
y | len | Vertical offset. | |
top | len | Distance from the Stack's top edge. | |
right | len | Distance from the right edge. | |
bottom | len | Distance from the bottom edge. | |
left | len | Distance from the left edge. | |
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. | |
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
.obj: one object, the default slot