Order
Sets an object's layer in a Stack, Mask or Subtract. 0 is the base; negatives go below.
Layers, like z-index
Order sets which layer its object paints on in a Stack, a Mask or a Subtract. .posOrder(n) takes any integer: 0 is the base, higher paints above, negatives go below, and big numbers such as 9999 put something over everything. .pos, .pOrd and .pO are short forms; layr format writes .posOrder.
Stack(
.config(w: 220, h: 150)
Order(
.posOrder(0)
.obj(Container(.config(size: 100, color: violet, cornerRadius: 16)))
)
Order(
.posOrder(1)
.obj(
Position(
.config(left: 40, top: 25)
.obj(Container(.config(size: 100, color: teal, cornerRadius: 16)))
)
)
)
Order(
.posOrder(2)
.obj(
Position(
.config(left: 80, top: 50)
.obj(Container(.config(size: 100, color: gold, cornerRadius: 16)))
)
)
)
)Choosing the base of a Subtract
In a Subtract, the lowest order is the base and the others are cut out of it, whatever the order they are written in.
Subtract(
Order(.posOrder(1) .obj(Container(.config(size: 120, color: ember))))
Order(
.posOrder(0)
.obj(
Position(
.config(bottom: -40)
.obj(Container(.config(size: 80, color: teal, cornerRadius: 40)))
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
posOrder (pos, pOrd, pO) | int | 0 | Layer position, like z-index: any integer; higher paints above, 0 is the base, negatives go below. |
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