Extends Item

Rectangle

The Rectangle element paints a colored rectangle.

Here are some examples.

Sets the rectangle's fill color.

Rectangle {
    width: 100; height: 100

    color: #orange
}

property Gradient.Linear gradient: null

Sets the rectangle's fill gradient.

Rectangle {
    width: 100; height: 100

    gradient: Gradient.Linear {
        Gradient.Stop {
            stop: 0
            color: #red
        }
        Gradient.Stop {
            stop: 1
            color: #orange
        }
    }
}

property Float radius: 0

The rectangle corner radius.

Rectangle as rect {
    width: 100; height: 100
    color: #34aadc

    radius: 10
}

property Float borderWidth: 0

property Color borderColor: #black

Together define the border painting of the rectangle. With the default border width of 0, the rectangle's color extends right to the edge. A positive border width causes the border color to extend inwards from the rectangle's edges.

Rectangle as rect {
    width: 100; height: 100
    color: #34aadc
    radius: 10

    borderWidth: 2
    borderColor: #black
}