Frame

Creates an invisible frame around its child applying the given constraints.

modifier Frame

Example

import { Frame, Rectangle } from ui

export var main = Rectangle(color: Color(0xFF000000)) with {
    Frame(width: 100, height: 100)
}

Use max_width to cap how wide the frame itself may grow. The frame takes as much of the space its parent offers as it can and stops at max_width — with 500px available and max_width: 140 the frame is 140px wide, even if its child only needs 20px. That width is what the child gets offered, which is why a long line of text wraps instead of laying out on a single line:

import { Frame, Text } from ui

export var main = Text("The quick brown fox jumps over the lazy dog") with {
    Frame(max_width: 140)
}

Use min_width / min_height to guarantee a minimum size around a small child — for example a consistent hit area. The child is aligned within the frame:

import { Frame, Text } from ui

export var main = Text("OK") with {
    Frame(min_width: 100, min_height: 48)
}

max_height and min_height constrain the vertical space the same way max_width and min_width do for the horizontal space.

Constructors

Fixed Size

constructor(width: Float? = nil, height: Float? = nil, alignment: Alignment = Alignment.center)

Creates a fixed frame (minimum == maximum) around its child.

width: Float? = nil

Fixed width if set otherwise mirrors the childs width.

height: Float? = nil

Fixed height if set otherwise mirrors the childs height.

alignment: Alignment = Alignment.center

Sets the alignment of the child within the frame.

See Alignment

---

Size Range

constructor(min_width: Float? = nil, max_width: Float? = nil, min_height: Float? = nil, max_height: Float? = nil, alignment: Alignment = Alignment.center)

Creates a frame with a lower and upper limit around the child.

min_width: Float? = nil

Lower limit for the frame's width if set.

max_width: Float? = nil

Upper limit for the frame's width if set. The frame grows into the available space up to this value regardless of the childs size.

min_height: Float? = nil

Lower limit for the frame's height if set.

max_height: Float? = nil

Upper limit for the frame's height if set. The frame grows into the available space up to this value regardless of the childs size.

alignment: Alignment = Alignment.center

Sets the alignment of the child within the frame.

Layout Behavior

The frame is always going to respect the constraints set on it. For unspecified dimensions it is going to mirror the childs size.

Every constraint describes the frame's own size — the child is never part of that decision. A frame with max_width claims the offered space up to the limit and keeps it whether or not the child fills it; a frame with min_width keeps at least that width whether or not the child needs it. Only once the frame has settled on its size does the child get laid out inside it and positioned by alignment. Leave a dimension unset when the child's size should decide it.