Ubuntu.Components.UbuntuShapeOverlay

Extended UbuntuShape adding a colored overlay layer. More...

Properties

• overlayColor : color
• overlayRect : rect

Detailed Description

The UbuntuShapeOverlay is a rounded rectangle (based on a href="https://en.wikipedia.org/wiki/Squircle">squircle) containing a set of layers composed, from top to bottom, of a colored rectangle overlay, an optional source image and a background color (solid or linear gradient). Different properties allow to change the look of the shape.

Example:

import Ubuntu.Components 1.2
UbuntuShapeOverlay {
backgroundColor: "white"
overlayColor: "black"
overlayRect: Qt.rect(0.25, 0.25, 0.5, 0.5)
}

Property Documentation

This property sets the color of the overlay rectangle defined by overlayRect. The default value is transparent black.

This QML property was introduced in Ubuntu.Components 1.2.

This property sets the overlay rectangle. The default value is the empty rectangle.

It is defined by a position and a size in normalized item coordinates (in the range between 0 and 1) with the origin at the top-left corner. An overlay covering the bottom part and starting at the vertical center can be done like that:

UbuntuShapeOverlay {
width: 200; height: 200
overlayColor: Qt.rgba(0.0, 0.0, 0.5, 0.5)
overlayRect: Qt.rect(0.0, 0.5, 1.0, 0.5)
}

Converting a position and a size in pixels to normalized item coordinates can be done with a division by the size. Here is an equivalent of the previous code sample:

UbuntuShapeOverlay {
width: 200; height: 200
overlayColor: Qt.rgba(0.0, 0.0, 0.5, 0.5)
overlayRect: Qt.rect(100.0/width, 100.0/height, 200.0/width, 100.0/height)
}

A geometry exceeding the item area is cropped.

This QML property was introduced in Ubuntu.Components 1.2.