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 a flexible child may grow. Here a long line of text wraps instead of laying out on a single line once it reaches the limit:
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_heightandmin_heightconstrain the vertical space the same waymax_widthandmin_widthdo 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? = nilFixed width if set otherwise mirrors the childs width.
height: Float? = nilFixed height if set otherwise mirrors the childs height.
alignment: Alignment = Alignment.centerSets 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? = nilLower limit for width if set.
max_width: Float? = nilUpper limit for width if set.
min_height: Float? = nilLower limit for height if set.
max_height: Float? = nilUpper limit for height if set.
alignment: Alignment = Alignment.centerSets 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.