Kirigami2

Introduction

Kirigami is a set of QtQuick components for building adaptable UIs based on QtQuick Controls 2.

Its goal is to enable creation of convergent applications that look and feel great on mobile as well as desktop devices and follow the KDE Human Interface Guidelines while being easy to use and not adding many dependencies.

Kirigami works on a variety of platforms, such as Plasma Mobile, Desktop Linux, Android, MacOS, and Windows.

It was introduced in KDE Frameworks 5.37 as a Tier-1 KDE Framework.

Tutorial

A tutorial for Kirigami is available on our developer platform.

It is possible to make short mockups using QtQuick and Kirigami in the QML Online website and briefly test individual QML files using qmlscene or the qml tool.

A list of additional QML learning resources is available in the Community Wiki. If you are not familiar with QML at all, the QML book should be a good head start.

If you have any questions about Kirigami, feel free to drop by the Kirigami group on Matrix.

Main Components

Common Kirigami Controls

Minimal Example

import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import org.kde.kirigami 2.20 as Kirigami
 
Kirigami.ApplicationWindow {
    id: root
 
    width: 500
    height: 400
 
    globalDrawer: Kirigami.GlobalDrawer {
        title: "Hello App"
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: "View"
                icon.name: "view-list-icons"
                Kirigami.Action {
                    text: "action 1"
                }
                Kirigami.Action {
                    text: "action 2"
                }
                Kirigami.Action {
                    text: "action 3"
                }
            },
            Kirigami.Action {
                text: "action 3"
            },
            Kirigami.Action {
                text: "action 4"
            }
        ]
    }
    contextDrawer: Kirigami.ContextDrawer {
        id: contextDrawer
    }
    pageStack.initialPage: mainPageComponent
    Component {
        id: mainPageComponent
        Kirigami.ScrollablePage {
            id: page
            title: "Hello"
            actions {
                main: Kirigami.Action {
                    icon.name: sheet.sheetOpen ? "dialog-cancel" : "document-edit"
                    onTriggered: {
                        print("Action button in buttons page clicked");
                        sheet.sheetOpen = !sheet.sheetOpen
                    }
                }
                left: Kirigami.Action {
                    icon.name: "go-previous"
                    onTriggered: {
                        print("Left action triggered")
                    }
                }
                right: Kirigami.Action {
                    icon.name: "go-next"
                    onTriggered: {
                        print("Right action triggered")
                    }
                }
                contextualActions: [
                    Kirigami.Action {
                        text:"Action for buttons"
                        icon.name: "bookmarks"
                        onTriggered: print("Action 1 clicked")
                    },
                    Kirigami.Action {
                        text:"Action 2"
                        icon.name: "folder"
                        enabled: false
                    },
                    Kirigami.Action {
                        text: "Action for Sheet"
                        visible: sheet.sheetOpen
                    }
                ]
            }
            Kirigami.OverlaySheet {
                id: sheet
                onSheetOpenChanged: page.actions.main.checked = sheetOpen
                Controls.Label {
                    wrapMode: Text.WordWrap
                    text: "Lorem ipsum dolor sit amet"
                }
            }
            //Page contents...
            Rectangle {
                anchors.fill: parent
                color: "lightblue"
            }
        }
    }
}

Deployment

CMake is used for both building Kirigami and projects using it, allowing for several configurations depending on how the deployment needs to be done.

Kirigami can be built in two ways: both as a module or statically linked to the application, leading to four combinations:

Kirigami built as a module with CMake
Kirigami statically built with CMake (needed to link statically from applications built with CMake)

The simplest and recommended way to use Kirigami is to just use the packages provided by your Linux distribution, or build it as a module and deploy it together with the main application.

For example, when building an application on Android with CMake, if Kirigami for Android is built and installed in the same temporary directory before the application, the create-apk step of the application will include the Kirigami files as well in the APK.

Statically linked Kirigami will be used only on Android, while on desktop systems it will use the version provided by the distribution. Which platforms use the static version and which use the dynamic one can be freely adjusted.

The application needs to have a folder called "3rdparty" containing clones of two KDE repositories: kirigami and breeze-icons (available at git://anongit.kde.org/kirigami.git and git://anongit.kde.org/breeze-icons.git).

The main.cpp file should then have something like:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#ifdef Q_OS_ANDROID
#include "./3rdparty/kirigami/src/kirigamiplugin.h"
#endif
 
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
 
    QQmlApplicationEngine engine;
 
#ifdef Q_OS_ANDROID
    KirigamiPlugin::getInstance().registerTypes(&engine);
#endif
    ...
}