kirigami

Introduction

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 QtQuickControls (soon QtQuickContrls2) 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 Kirigami 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 and Windows. It will eventually become a Tier-1 KDE Framework.

Main Components

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

Minimal Example

import QtQuick 2.1
import org.kde.kirigami 1.0 as Kirigami

Kirigami.ApplicationWindow {
    id: root

    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: Action {
                    iconName: sheet.opened ? "dialog-cancel" : "document-edit"
                    onTriggered: {
                        print("Action button in buttons page clicked");
                        sheet.opened = !sheet.opened
                    }
                }
                left: Action {
                    iconName: "go-previous"
                    onTriggered: {
                        print("Left action triggered")
                    }
                }
                right: Action {
                    iconName: "go-next"
                    onTriggered: {
                        print("Right action triggered")
                    }
                }
                contextualActions: [
                    Action {
                        text:"Action for buttons"
                        iconName: "bookmarks"
                        onTriggered: print("Action 1 clicked")
                    },
                    Action {
                        text:"Action 2"
                        iconName: "folder"
                        enabled: false
                    },
                    Action {
                        text: "Action for Sheet"
                        visible: sheet.opened
                    }
                ]
            }
            //Page contents...
        }
    }
}

Author(s):

Marco Martin <notma.nosp@m.rt@g.nosp@m.mail..nosp@m.com>
Sebastian Kuegler <sebas.nosp@m.@kde.nosp@m..org>
Aleix Pol Gonzalez <aleix.nosp@m.pol@.nosp@m.kde.o.nosp@m.rg>
Dirk Hohndel <dirk@.nosp@m.hohn.nosp@m.del.o.nosp@m.rg>

Maintainer(s):

Marco Martin <notma.nosp@m.rt@g.nosp@m.mail..nosp@m.com>

License(s):

LGPLv2