• Skip to content
  • Skip to link menu
Brand

API Documentation

  1. KDE API Reference
  2. The KDE Frameworks
  3. Kirigami2
  • KDE Home
  • Contact Us

Quick Links

Skip menu "Kirigami2"
  • Main Page
  • Alphabetical List
  • Class List
  • Class Hierarchy
  • File List
  • Related Pages

Class Picker

About

QtQuick plugins to build user interfaces based on the KDE human interface guidelines

Maintainer
Marco Martin
Supported platforms
Android, FreeBSD, iOS, Linux, MacOSX, Windows
Community
IRC: #kde-kirigami on Freenode
Mailing list: plasma-devel
Use with CMake
find_package(KF5Kirigami2)
target_link_libraries(yourapp KF5::Kirigami2)
Clone
git clone git://anongit.kde.org/kirigami.git
Browse source
Kirigami2 on cgit.kde.org

Kirigami2

kirigami

Overview

Kirigami is a set of QtQuick components at the moment targeted for mobile use (in the future desktop as well) targeting both Plasma Mobile and Android. It’s not a whole set of components (all the “Primitive” ones like buttons and textboxes are a job for QtQuickControls2), but it’s a set of high-level components to make the creation of applications that look and feel great on mobile as well as desktop devices and follow the KDE Human Interface Guidelines. The target of those components is anybody that wants to do an application using QtQuick as its main UI, especially if targeting a mobile platform, without adding many dependencies. They work on a variety of platforms, such as Plasma Mobile, Desktop Linux, Android, iOS and Windows. It is a Tier-1 KDE Framework starting with KDE Frameworks 5.37.

Main Components

  • ApplicationWindow
  • Action
  • GlobalDrawer
  • ContextDrawer
  • OverlayDrawer
  • Page
  • ScrollablePage
  • OverlaySheet
  • Theme
  • Units
  • Icon
  • AbstractApplicationHeader
  • AbstractApplicationWindow
  • AbstractListItem
  • ApplicationHeader
  • BasicListItem
  • ListSectionHeader
  • SwipeListItem
  • Heading
  • Label

Minimal Example

import QtQuick 2.1
import QtQuick.Controls 2.0 as QQC2
import org.kde.kirigami 2.4 as Kirigami
Kirigami.ApplicationWindow {
id: root
header: Kirigami.ApplicationHeader {}
globalDrawer: Kirigami.GlobalDrawer {
title: "Hello App"
titleIcon: "applications-graphics"
actions: [
Kirigami.Action {
text: "View"
iconName: "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 {
title: "Hello"
actions {
main: Kirigami.Action {
iconName: sheet.sheetOpen ? "dialog-cancel" : "document-edit"
onTriggered: {
print("Action button in buttons page clicked");
sheet.sheetOpen = !sheet.sheetOpen
}
}
left: Kirigami.Action {
iconName: "go-previous"
onTriggered: {
print("Left action triggered")
}
}
right: Kirigami.Action {
iconName: "go-next"
onTriggered: {
print("Right action triggered")
}
}
contextualActions: [
Kirigami.Action {
text:"Action for buttons"
iconName: "bookmarks"
onTriggered: print("Action 1 clicked")
},
Kirigami.Action {
text:"Action 2"
iconName: "folder"
enabled: false
},
Kirigami.Action {
text: "Action for Sheet"
visible: sheet.sheetOpen
}
]
}
Kirigami.OverlaySheet {
id: sheet
onSheetOpenChanged: page.actions.main.checked = sheetOpen
QQC2.Label {
wrapMode: Text.WordWrap
text: "Lorem ipsum dolor sit amet"
}
}
//Page contents...
}
}
}

Deployment

CMake is recomended for both building Kirigami and the project using it, QMake is supported as well, so we can have several configurations, depending what is the host build system and how the deployment needs to be done. Kirigami can be built in two ways: both as a module or statically linked in 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) Kirigami built as a module with QMake Kirigami statically built with QMake (needed to link statically from applications built with QMake)

The simplest and recomended way to use Kirigami is to just use the module provided by the Linux distribution, or build it as a module and deploy it together 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.

If QMake needs to be used, it's recomended to follow the schema of the example app present in the folder examples/minimalqmake of the Kirigami source code.

It will use Kirigami statically linked only on Android, while on desktop systems it will use the version provided by the distribution. What platforms use the static version and what 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 relevant part in the .pro file is:

android: {
include(3rdparty/kirigami/kirigami.pri)
}

While the main.cpp file will 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();
#endif
....
}
Author(s):
Marco Martin <notma[email protected][email protected][email protected]mail.[email protected]com>
Sebastian Kuegler <sebas[email protected]@kde[email protected].org>
Aleix Pol Gonzalez <aleix[email protected][email protected][email protected]kde.o[email protected]rg>
Dirk Hohndel <[email protected][email protected]hohn[email protected]del.o[email protected]rg>
Maintainer(s):
Marco Martin <notma[email protected][email protected][email protected]mail.[email protected]com>
License(s):
LGPLv2
This file is part of the KDE documentation.
Documentation copyright © 1996-2019 The KDE developers.
Generated on Sat Dec 7 2019 03:21:19 by doxygen 1.8.11 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.

Report problems with this website to our bug tracking system.
Contact the specific authors with questions and comments about the page contents.

KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V. | Legal