Skip to main content

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)
}

Frame capping a child with max_width

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)
}

Frame enforcing a minimum size with min_width and min_height

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 width if set.

max_width: Float? = nil

Upper limit for width if set.

min_height: Float? = nil

Lower limit for height if set.

max_height: Float? = nil

Upper limit for height if set.

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.