Subtract
Cuts the upper layer's shape out of the base layer.
A hole cut out
Subtract cuts the upper layers' shapes out of the base layer, the one with the lowest Order. What was cut shows whatever is behind.
Subtract(
Order(
.posOrder(0)
.obj(Container(.config(size: 160, color: accent, cornerRadius: 80)))
)
Order(
.posOrder(1)
.obj(
Position(
.config(bottom: 18, right: 18)
.obj(Container(.config(size: 56, cornerRadius: 28)))
)
)
)
)What is left outside the cut
The base keeps everything the cut does not cover, even where it reaches outside the others. Here the base is the teal circle, pushed below the square by bottom: -40; the square cuts it away except for the part that hangs out underneath.
Subtract(
Order(.posOrder(1) .obj(Container(.config(size: 140, color: ember))))
Order(
.posOrder(0)
.obj(
Position(
.config(bottom: -40)
.obj(Container(.config(size: 90, color: teal, cornerRadius: 45)))
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
align (alignment) | align | mid | Where the cut sits by default. |
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
.objs: several objects, the default slot