/* * This file is part of Kirigami * SPDX-FileCopyrightText: 2016 Marco Martin * * SPDX-License-Identifier: LGPL-2.0-or-later */ /** \mainpage kirigami \subsection overview 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. \subsection tutorial 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 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. \subsection components Main Window Components - \link ApplicationWindow ApplicationWindow \endlink - \link Action Action \endlink - \link GlobalDrawer GlobalDrawer \endlink - \link ContextDrawer ContextDrawer \endlink - \link OverlayDrawer OverlayDrawer \endlink - \link Page Page \endlink - \link ScrollablePage ScrollablePage \endlink - \link AboutPage AboutPage \endlink - \link PageRow PageRow \endlink - \link FormLayout FormLayout \endlink - \link CardsLayout CardsLayout \endlink - \link SizeGroup SizeGroup \endlink - \link Kirigami::Platform::PlatformTheme Theme \endlink - \link Kirigami::Platform::Units Units \endlink \subsection controls Common Kirigami Controls - \link Card Card \endlink - \link org::kde::kirigami::templates::OverlaySheet OverlaySheet \endlink - \link SwipeListItem SwipeListItem \endlink - \link Heading Heading \endlink - \link PlaceholderMessage PlaceholderMessage \endlink - \link SearchField SearchField \endlink - \link Dialog Dialog \endlink - \link NavigationTabBar NavigationTabBar \endlink - \link Icon Icon \endlink \subsection example Minimal Example @code import QtQuick import QtQuick.Controls as QQC2 import org.kde.kirigami as Kirigami Kirigami.ApplicationWindow { id: root width: 500 height: 400 globalDrawer: Kirigami.GlobalDrawer { 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 QQC2.Label { wrapMode: Text.WordWrap text: "Lorem ipsum dolor sit amet" } } //Page contents... Rectangle { anchors.fill: parent color: "lightblue" } } } } @endcode @image html MinimalExample.webp \subsection deployment 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: @code #include #include #ifdef Q_OS_ANDROID #include "./3rdparty/kirigami/src/kirigamiplugin.h" #endif int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; #ifdef Q_OS_ANDROID KirigamiPlugin::getInstance().registerTypes(&engine); #endif ... } @endcode @authors Marco Martin \
Sebastian Kuegler \
Aleix Pol Gonzalez \
Dirk Hohndel \
@maintainers Marco Martin \ @licenses @lgpl */ // DOXYGEN_SET_RECURSIVE = YES // DOXYGEN_SET_EXCLUDE_PATTERNS += *_p.h */private/* */examples/* */doc/* */styles/* // DOXYGEN_SET_PROJECT_NAME = Kirigami // vim:ts=4:sw=4:expandtab:filetype=doxygen