Frame (frame)

const frame = canvasUI.layout.new("frame-1", "frame")

frame.insert(area1)
frame.insert(area2)

area1.layoutParams.set("align", {
  horizontal: "middle",
  vertical: "middle",
})

area2.layoutParams.set("align", {
  horizontal: "right",
  vertical: "bottom",
})

area2.layoutParams.get("margin").right = 50

size

It is the size of the layout. It is an object with these properties:

• width: Width of the layout.
• height: Height of the layout.

Each of these properties can be "auto" to make the size adapt to the size of its content, and it can also be an object with these properties:

• unit: It is the unit used to define the size, and it can be "px" and "%".
• value: It is the size in terms of the unit specified in the other property.

If the unit is "px" the value will be in px. If it is "%" the value will be the percentage of its maximum available size.

Its default value is:

{
  width: { unit: "%", value: 100 },
  height: { unit: "%", value: 100 }
}

background

It is the background color of the layout. Its default value is:

"rgba(0,0,0,0)"

border

It is the border of the layout. It is an object with these properties:

• size: It is the size of the border.
• color It is the color of the border.

Its default value is:

{
  size: 0,
  color: "#000"
}

corner

It defines how the corners are drawn. It is an object with these properties:

• type: It can be "cut" to define that the corners have to be cut, and it can also be "round" to define that the corners have to be rounded.
• size: It is a number that defines how much the corners will be cut or rounded.

Its default value is:

{
  type: "cut",
  size: 0
}

align

It defines the alignment of the element. It is an object with these properties:

• horizontal: It defines the horizontal alignment and can be "left", "middle" and "right".
• vertical: It defines the vertical alignment and can be "top", "middle" and "bottom".

Its default value is:

{
  horizontal: "left",
  vertical: "top"
}`

zIndex

It is used to define the order in which the children are drawn. The child with the highest value will be the last child to be drawn, and it will cover the other ones if they overlap. If two children have the same value, they will be drawn in the order in which they were inserted. Its default value is:

0

margin

It defines the margin of the child with its surroundings. It is an object with these properties:

• top: Top margin.
• right: Right margin.
• bottom: Bottom margin.
• left: Left margin.

Its default value is:

{
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
}