Syntax

Comments

Comments are lines of code that are ignored by the Slint compiler. They are used to explain the code or to temporarily disable code.

Single line comments

Single line comments are denoted by // and are terminated by a new line.

// Amazing text! This is a comment

Multi line comments

Multi line comments are denoted by /* and */ and are terminated by a new line.

/*
    This is a multi line comment.
    It can span multiple lines.
*/

Elements and components

The core part of the Slint language are elements and components. Technically they are the same thing so once you know how to declare and use one you know the other. Elements are the basic building blocks that are part of the Slint Language, while components (also know as widgets) are larger items that are built up from multiple elements and properties.

If you have come from other languages such as HTML or React you might be used to opening and closing tags as well as self closing tags.

<!-- opening and closing tag -->
<Button>Hello World</Button>
 <!-- self closing tag -->
<img/>

Slint simply has a single way to declare an item the element-name followed by a set of curly braces {} that contain the properties of the element.

// valid
Text {}

Text {
}
// Valid, but considered bad Slint practice
Text
{
}

// Not valid due to terminating semicolon
Text {};

Note

The Slint tooling provides a code formatter that enforces what is considered good practice.

If you are new to coding then you can make friends with fellow developers by discussing aspects of code formatting you don’t like. It’s a type of small talk developers love and appreciate.

The root element

component MyApp {
    Text {
        text: "Hello World";
        font-size: 24px;
    }
}

To be a valid Slint file the root element must be a component. Then inside the component you can declare any number of elements. This is explained in more detail later, it’s not important to understand at this point.

Properties

Properties are the values that are assigned to an element. They are set using the property-name: value; syntax.

Identifiers

Identifiers can be composed of letter (a-zA-Z), of numbers (0-9), or of the underscore (_) or the dash (-). They can’t start with a number or a dash (but they can start with underscore) The underscores are normalized to dashes. Which means that these two identifiers are the same: foo_bar and foo-bar.

Conditional Elements

The if construct instantiates an element only if a given condition is true. The syntax is if condition : id := Element { ... }

export component Example inherits Window {
    preferred-width: 50px;
    preferred-height: 50px;
    if area.pressed : foo := Rectangle { background: blue; }
    if !area.pressed : Rectangle { background: red; }
    area := TouchArea {}
}