Mask
Masks layers with the lowest Order layer (a paint: colour, gradient or image).
Fading a list out
Mask shows its layers only where the mask layer is opaque. The mask is the layer with the lowest Order (a colour, a gradient or an image), and mode reads it by alpha (the default) or by luminance. A gradient from solid to transparent fades whatever is above it: here the end of a list.
Mask(
.config(w: 320, h: 200)
Order(
.posOrder(0)
.obj(
Container(
.config(
w: 320
h: 200
color: LinearGradient(.colors(black, black.alpha(0)))
)
)
)
)
Order(
.posOrder(1)
.obj(
Column(
.config(w: 320, gap: 8)
Container(.config(w: fill, h: 44, color: violet, cornerRadius: 10))
Container(.config(w: fill, h: 44, color: teal, cornerRadius: 10))
Container(.config(w: fill, h: 44, color: gold, cornerRadius: 10))
Container(.config(w: fill, h: 44, color: ember, cornerRadius: 10))
)
)
)
)A shaped window onto a gradient
Mask(
.config(w: 320, h: 90)
Order(
.posOrder(0)
.obj(Container(.config(w: 320, h: 90, color: black, cornerRadius: 999)))
)
Order(
.posOrder(1)
.obj(
Container(
.config(
w: 320
h: 90
color: LinearGradient(.colors(violet, ember, gold))
)
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
mode | alpha | luminance | alpha | Mask by alpha or luminance. |
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