Align
Fills its parent and places its object at an alignment.
Placing at an edge or corner
Align fills its parent and places its object at an alignment: topLeft, topMid, topRight, midLeft, mid, midRight, bottomLeft, bottomMid or bottomRight. to is also written align or alignment.
Container(
.config(
w: 280
h: 140
.border(color: line, width: 1)
color: panel
cornerRadius: 14
padding: all(14)
)
.obj(
Align(
.config(to: bottomRight)
.obj(
Container(
.config(color: accent, cornerRadius: 8, padding: sym(x: 12, y: 6))
.obj(Text(.config(size: 13, color: onAccent) .obj('Continue')))
)
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
to (align, alignment) | align | mid | Where to place the object. |
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