Module sixtyfps::docs::builtin_elements[][src]

Builtin Elements

Common properties

These properties are valid on all visible items

Drop Shadows

To achieve the graphical effect of a visually elevated shape that shows a shadow effect underneath the frame of an element, it is possible to set the following drop-shadow properties:

The drop-shadow effect is supported for Rectangle and Clip elements.

Window

Window is the root of what is on the screen

Properties

Rectangle

By default, the rectangle is just an empty item that shows nothing. By setting a color or a border it is then possible to draw a simple rectangle on the screen

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

Properties

Example

Example := Window {
    width: 270px;
    height: 100px;

    Rectangle {
        x: 10px;
        y: 10px;
        width: 50px;
        height: 50px;
        background: blue;
    }

    // Rectangle with a border
    Rectangle {
        x: 70px;
        y: 10px;
        width: 50px;
        height: 50px;
        background: green;
        border_width: 2px;
        border_color: red;
    }

    // Transparent Rectangle with a border and a radius
    Rectangle {
        x: 140px;
        y: 10px;
        width: 50px;
        height: 50px;
        border_width: 4px;
        border_color: black;
        border_radius: 10px;
    }

    // A radius of width/2 makes it a circle
    Rectangle {
        x: 210px;
        y: 10px;
        width: 50px;
        height: 50px;
        background: yellow;
        border_width: 2px;
        border_color: blue;
        border_radius: width/2;
    }
}

Image

An Image can be used to represent an image loaded from an image file.

Properties

Example

Example := Window {
    VerticalLayout {
        Image {
            source: @image-url("https://sixtyfps.io/resources/logo_scaled.png");
            // image-fit default is `contain` when in layout, preserving aspect ratio
        }
        Image {
            source: @image-url("https://sixtyfps.io/resources/logo_scaled.png");
            colorize: red;
        }
    }
}

Scaled while preserving the aspect ratio:

Example := Window {
    Image {
        source: @image-url("https://sixtyfps.io/resources/logo_scaled.png");
        width: 270px;
        // implicit default, preserving aspect ratio: height: self.width * natural_height / natural_width;
    }
}

Text

A text simply show the text on the screen

Properties

Example

Example := Window {
    width: 270px;
    height: 100px;

    Text {
        text: "Hello World";
        color: red;
    }
}

Path

The Path element allows rendering a generic shape, composed of different geometric commands. A path shape can be filled and outlined.

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

A path can be defined in two different ways:

The coordinates used in the geometric commands are within the imaginary coordinate system of the path. When rendering on the screen, the shape is drawn relative to the x and y properties. If the width and height properties are non-zero, then the entire shape is fit into these bounds - by scaling accordingly.

Common Path Properties

Path Using SVG commands

SVG is a popular file format for defining scalable graphics, which are often composed of paths. In SVG paths are composed using commands, which in turn are written in a string literal. In .60 the path commands are provided to the commands property. The following example renders a shape consists of an arc and a rectangle, composed of line-to, move-to and arc commands:

Example := Path {
    width: 100px;
    height: 100px;
    commands: "M 0 0 L 0 100 A 1 1 0 0 0 100 100 L 100 0 Z";
    stroke: red;
    stroke-width: 1px;
}

The commands are provided in a property:

Path Using SVG Path Elements

The shape of the path can also be described using elements that resemble the SVG path commands but use the .60 markup syntax. The earlier example using SVG commands can also be written like that:

Example := Path {
    width: 100px;
    height: 100px;
    stroke: blue;
    stroke-width: 1px;

    MoveTo {
        x: 0;
        y: 0;
    }
    LineTo {
        x: 0;
        y: 100;
    }
    ArcTo {
        radius-x: 1;
        radius-y: 1;
        x: 100;
        y: 100;
    }
    LineTo {
        x: 100;
        y: 0;
    }
    Close {
    }
}

Note how the coordinates of the path elements do not use units - they operate within the imaginary coordinate system of the scalable path.

MoveTo Sub-element for Path

The MoveTo sub-element closes the current sub-path, if present, and moves the current point to the location specified by the x and y properties. Subsequent elements such as LineTo will it as their starting point, therefore this starts a new sub-path.

Properties
LineTo Sub-element for Path

The LineTo sub-element describes a line from the path’s current position to the location specified by the x and y properties.

Properties
ArcTo Sub-element for Path

The ArcTo sub-element describes the portion of an ellipse. The arc is drawn from the path’s current position to the location specified by the x and y properties. The remaining properties are modelled after the SVG specification and allow tuning visual features such as the direction or angle.

Properties
CubicTo Sub-element for Path

The CubicTo sub-element describes a smooth Bézier from the path’s current position to the location specified by the x and y properties, using two control points specified by their respective properties.

Properties
QuadraticTo Sub-element for Path

The QuadraticTo sub-element describes a smooth Bézier from the path’s current position to the location specified by the x and y properties, using the control points specified by the control-x and control-y properties.

Properties
Close Sub-element for Path

The Close element closes the current sub-path and draws a straight line from the current position to the beginning of the path.

TouchArea

The TouchArea control what happens when the zone covered by it is touched or interacted with the mouse.

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

Properties

Callbacks

Example

Example := Window {
    width: 200px;
    height: 100px;
    area := TouchArea {
        width: parent.width;
        height: parent.height;
        clicked => {
            rect2.background = #ff0;
        }
    }
    Rectangle {
        width: parent.width / 2;
        height: parent.height;
        background: area.pressed ? blue: red;
    }
    rect2 := Rectangle {
        x: parent.width / 2;
        width: parent.width / 2;
        height: parent.height;
    }
}

FocusScope

The FocusScope exposes callback to intercept the pressed key when it has focus.

Properties

Methods

Callbacks

Example

Example := Window {
    FocusScope {
        key-pressed(event) => {
            debug(event.text);
            if (event.modifiers.control) {
                debug("control was pressed during this event");
            }
            accept
        }
    }
}

VerticalLayout / HorizontalLayout

These layouts place their children next to eachother verticaly or horizontally. The size of elements can either be fixed with the width or height property, or if they are not set they will be computed by the layout respecting the minimum and maximum sizes and the strecth factor.

Properties

Example

Foo := Window {
    width: 200px;
    height: 100px;
    HorizontalLayout {
        spacing: 5px;
        Rectangle { background: red; width: 10px; }
        Rectangle { background: blue; minimum-width: 10px; }
        Rectangle { background: yellow; horizontal-stretch: 1; }
        Rectangle { background: green; horizontal-stretch: 2; }
    }
}

GridLayout

GridLayout places the elements in a grid. GridLayout adds properties to each item: col, row, colspan, rowspan. You can control the position of elements with col and row. If col or row is not specified, they are automatically computed such that the item is next to the previous item, in the same row. Alternatively, the item can be put in a Row element.

Properties

Examples

This example use the Row element

Foo := Window {
    width: 200px;
    height: 200px;
    GridLayout {
        spacing: 5px;
        Row {
            Rectangle { background: red; }
            Rectangle { background: blue; }
        }
        Row {
            Rectangle { background: yellow; }
            Rectangle { background: green; }
        }
    }
}

This example use the col and row property

Foo := Window {
    width: 200px;
    height: 150px;
    GridLayout {
        Rectangle { background: red; }
        Rectangle { background: blue; }
        Rectangle { background: yellow; row: 1; }
        Rectangle { background: green; }
        Rectangle { background: black; col: 2; row: 0; }
    }
}

PathLayout

FIXME: write docs

Flickable

FIXME: write docs

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

TextInput

The TextInput is a lower-level item that shows text and allows entering text.

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

Properties

Methods

Callbacks

Example

Example := Window {
    width: 270px;
    height: 100px;

    TextInput {
        text: "Replace me with a name";
    }
}

Clip

By default, when an item is bigger or outside another item, it is still shown. But the Clip element make sure to clip any children outside of the rectangle bounds

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

FIXME: deprecate this item as it can be replaced by the clip: property

This allow to show a popup window like a tooltip or a popup menu.

Note: it is not allowed to access properties on element within the popup from outside of the popup

Methods

Example

Example := Window {
    width: 100px;
    height: 100px;

    popup := PopupWindow {
        Rectangle { height:100%; width: 100%; background: yellow; }
        x: 20px; y: 20px; height: 50px; width: 50px;
    }

    TouchArea {
        height:100%; width: 100%;
        clicked => { popup.show(); }
    }
}

Builtin Structures

KeyEvent

This structure is generated and passed to the key press and release callbacks of the FocusScope element.

Fields

KeyboardModifiers

This structure is generated as part of KeyEvent, to indicate which modifier keys are pressed during the generation of a key event.

Fields

Builtin Enums

The default value of each enum type is always the first value

TextHorizontalAlignment

This enum describes the different types of alignment of text along the horizontal axis.

Values

TextVerticalAlignment

This enum describes the different types of alignment of text along the vertical axis.

Values

TextWrap

This enum describes the how the text wrap if it is too wide to fit in the Text width.

Values

TextOverflow

This enum describes the how the text appear if it is too wide to fit in the Text width.

Values

EventResult

This enum describes whether an event was rejected or accepted by an event handler.

Values

FillRule

This enum describes the different ways of deciding what the inside of a shape described by a path shall be.

Values

Next: Widgets