Getting Started¶

This page will guide you through installing Absolute and using it in your application

Installation¶

There are 3 different ways to install and use Absolute:

Just drop the content of the src to a path on the QML2_IMPORT_PATH (e.g. in your qml resources)
Install the project with CMake, qml files will be installed in the Qt5 qml install directory

mkdir build && cd build
cmake ..
make
sudo make install

Use Absolute as a CMake sub-project

set(ABSOLUTE_QML_INSTALL_DIR "${CMAKE_BINARY_DIR}/lib/MyAwesomeProject/qml") # optional, set this if you already have a path where you put your project's qml file.
set(ABSOLUTE_BUILD_EXAMPLES OFF) # skip building examples
set(ABSOLUTE_BUILD_TESTS OFF) # skip building tests
add_subdirectory(third-party/absolute)

Using Absolute Style¶

1. Enable Absolute Style in your main¶

To use the absolute style, you need to tell Qt that it should use the Absolute QQC2 Style:

You can do that by setting QT_QUICK_CONTROLS_STYLE environment variable or use QQuickStyle if you’re working with C++.

Note

If you didn’t installed Absolute in the Qt5 qml install directory, you’ll have to specify an additional QML import path.

Example:

// Specify where qml can find the Absolute qml files
qputenv("QML2_IMPORT_PATH", ABSOLUTE_IMPORT_PATH);
// Use Absolute Quick Controls 2 Style
qputenv("QT_QUICK_CONTROLS_STYLE", "Absolute");

2. Configure Style Globally¶

The Style object (from import Absolute.Style 0.1) is a singleton object that holds a series of configuration settings:

theme

typography

icon font

To help configure Style in a declarative way, you should use StyleConfiguration item.

Example:

import Absolute.Style 0.1

ApplicationWindow {
    id: mainWindow

    StyleConfiguration {
        // Use one of our ready made themes (see AvailableThemes) or define your own
        theme: Theme {
            dark: Palette {
                ...
            }
            light: Palette {
                ...
            }
            radius: 0
        }
        typography: Typography {
            medium: 13
        }
        iconFont: "FontAwesome"
    }
}

3. Choose to use the Dark or Light palette¶

By default, Absolute will always use the light palette of the configured theme. You can switch between the light and dark palette use the Material attached property.

Note

We use the Material attached property to customize controols instead of our own for two reasons:

it is not possible to create an attached property in pure QML, you need C++ or Python
the Material attached property already contains most of the properties we wanted to expose and it also has the nice feature of cascading style changes to children items.

For example, to use the dark palette of the current theme:

import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import Absolute.Style 0.1

ApplicationWindow {
    id: mainWindow

    Material.theme: Material.Dark
}

4. Customize a specific control¶

To customize the appearance of a specific control, you may use the Material attached property as you would do if you were using the Material Style from Qt.

For example, to customize the background of a Button:

Button {
    text: "Blue Button"
    highlighted: true

    Material.accent: "blue"
}

5. The icon property¶

We use an icon font for rendering icons. Contrarily to the official Qt API; we don’t render icons as images but as text.

The default icon font can be set from the StyleConfiguration. Default is Material Icons.

This means that the meaning of the icon properties is changed compared to what you’d do with other QQC2 styles:

icon.name: specifies the glyph to use to render the icon. You may want to use our builtin MaterialIcons singleton object that provides easy access to all the material icons.
icon.source: specifies the font family of the font to use to render the icon. Default is Material Icons, Regular but you can use another icon font if you want.

6. Additional properties¶

Radius¶

We added the radius property to button, pane and frame so that you can customize the radius of those elements independantly from the global radius property from the global Theme.

Warning

Using the radius property will break your application if you’re not using Absolute Style.