Skip to main content

Padding

Adds empty space around the component

modifier Padding

Example​

import { Padding, Text, Background, Rectangle } from ui

export var main = Text("Hello, world!") with {
    Padding(8)
    Background {
        Rectangle(color: Color(0xFF123456))
    }
}

Background Example

Constructors​

All Sides​

constructor(_ padding: Float)

Adds the same amount of space on all sides.

_ padding: Float

The padding size in pixels.

Horizontal & Vertical​

constructor(horizontal: Float = 0, vertical: Float = 0)

Adds horizontal and vertical padding.

horizontal: Float = 0

The padding size for the left and right side.

vertical: Float = 0

The padding size for the top and bottom side.

Per Edge​

constructor(left: Float = 0, right: Float = 0, top: Float = 0, bottom: Float = 0)

Adds individual padding per side.

left: Float = 0

The padding size for the left side.

right: Float = 0

The padding size for the right side.

top: Float = 0

The padding size for the top side.

bottom: Float = 0

The padding size for the bottom side.

Layout Behavior​

Padding works in two ways. It first removes the padding from the available area before suggesting it to its component. Once the child determined its size the padding is added on top.

Negative padding sizes are valid in invert the behavior.