Expand
Makes its object fill the remaining space along the parent's direction.
Also written Expanded, Flexible; layr format rewrites these to Expand.
Taking the space that is left
Expand makes its object fill the rest of the parent's direction: the width of a Row, the height of a Column. Here a thin line fills the gap between a label and a price, the way a receipt reads.
Column(
.config(w: 300, color: panel, cornerRadius: 12, gap: 8, padding: all(16))
Row(
.config(w: fill, gap: 8, yAlign: mid)
Text('Studio, 2 hours')
Expand(Container(.config(h: 1, color: line)))
Text(.config(weight: semibold) .obj('€48'))
)
Row(
.config(w: fill, gap: 8, yAlign: mid)
Text('Mixing session')
Expand(Container(.config(h: 1, color: line)))
Text(.config(weight: semibold) .obj('€30'))
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
flex | num | 1 | Share of the remaining space. |
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. |
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