Lådor

Lådor är paneler som glider ut från programfönstrets sidor. De kan befolkas med interaktiva element som Kirigami åtgärder, knappar, text, med mera.

Lådor har olika typer, skepnader och former. På den här sidan går vi igenom alla typer och ger en översikt över deras karaktärer.

Global låda

Den globala lådan är en standardfunktion i KDE:s mobilprogram och kan ibland också finnas i deras skrivbordsinkarnationer. Den innehåller programmets huvudmeny: här ingår alla funktioner som inte är specifika för den nuvarande sidan men ändå signifikanta för allmän navigering eller interaktion med programmet.

Den kan aktiveras genom att röra vid hamburgermenyn eller genom att svepa från vänster kant till mitten av skärmen i vänster till höger-läge eller från höger kant i höger till vänster-läge.

Kirigami.GlobalDrawer components are what we use to create such drawers. These are set to the globalDrawer property of the Kirigami.ApplicationWindow that forms the basis of our Kirigami application.

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer"
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

Sidhuvud

Sidhuvud kan användas för att placera orörliga komponenter längst upp i din globala låda. Sidhuvudkomponenter förblir på plats även om din globala låda innehåller nästlade Kirigami-åtgärder som ersätter det nuvarande lagret i den globala lådan.

Your chosen header component can be set with the global drawer's header property, and it will replace the global drawer's title. This is useful to add a Kirigami.SearchField, for example:

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer with searchfield (not visible)"

        header: Kirigami.SearchField {
                id: searchField
        }

        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

Anpassa till skrivbordet

Medan globala lådor med panelstil kan vara användbara i mobilomgivningar, kan de vara för stora för skrivbordsdatorer, särskilt om programmet har ett fåtal åtgärder.

Thankfully, Kirigami global drawers provide an isMenu property. When set to true, they turn into more traditional menus only on the desktop.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        // Kirigami-åtgärder här ...
    ]
}

Sammanhangslådor

Medan en Kirigami.GlobalDrawer visar globala åtgärder tillgängliga överallt i programmet, ska en Kirigami.ContextDrawer användas för att visa åtgärder som bara är relevanta i vissa sammanhang. Det används oftast på separata sidor.

En sammanhangslåda beter sig olika beroende på om den används på en mobil plattform eller på en dator.

On a desktop, when a window has enough space, contextual actions show up as part of the actions group in the top toolbar. When space is limited, such as on a mobile device or in a narrow window, contextual actions are hidden behind a hamburger menu on the right side. This is different from other actions in the actions group, namely actions.main, actions.left and actions.right; these do not get hidden in space-constrained windows, and are instead collapsed into their respective icons.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    height: 600
    width: 1200
    minimumWidth: 500

    globalDrawer: Kirigami.GlobalDrawer {}
    contextDrawer: Kirigami.ContextDrawer {}

    pageStack.initialPage: [ emptyPage, contextDrawerPage ]

    Kirigami.Page {
        title: "Empty page"
        id: emptyPage
    }

    Kirigami.Page {
        id: contextDrawerPage
        title: "Context Drawer page"

        actions: [
            Kirigami.Action {
                icon.name: "media-record"
            },
            Kirigami.Action {
                icon.name: "arrow-left"
            },
            Kirigami.Action {
                icon.name: "arrow-right"
            },
            Kirigami.Action {
                text: "Contextual Action 1"
                icon.name: "media-playback-start"
            },
            Kirigami.Action {
                text: "Contextual Action 2"
                icon.name: "media-playback-stop"
            }
        ]
    }
}

På en mobil består lådan alltid av åtgärder dolda bakom en hamburgermeny. Den kan aktiveras genom att röra vid hamburgermenyn eller genom att svepa från vänster kant till mitten av skärmen i vänster till höger-läge eller från höger kant i höger till vänster-läge.

Modala lådor och lådor på plats

Kirigami erbjuder två ytterligare sorters lådor, modala lådor och lådor på plats. De är mycket lika varandra: båda fyller hela programmets bredd eller höjd och kan placeras vid programfönstrets kanter. Dock reagerar de olika på användarinteraktion.

• Modala lådor gör resten av programmet mörkare och avfärdas vid klick på ett mörkare område.
• Lådor på plats visas normalt och låter användaren fortfarande interagera med resten av programmet utan att de avfärdas, och gör inte andra områden mörkare.

Den här typen av låda är öppen och flexibel, men allmänhet kanske man vill använda den här typen av låda när man vill att en liten lista med alternativ ska visas med ett långt tryck eller högerklick.

De två lådorna är så lika eftersom de i själva verket kan implementeras med samma komponent i Kirigami: Kirigami.OverlayDrawer. Här är några viktiga egenskaper i komponenten att hålla i minnet:

• Popup.modal styr om lådan är modal eller på plats beroende på ett Booleskt värde
• Drawer.edge bestämmer vilken kant av programfönstret som lådan dyker upp. Alternativ för egenskapen är Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge och Qt.LeftEdge
• Popup.contentItem innehåller komponenterna som utgör lådans innehåll

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 400
    height: 600
    pageStack.initialPage: Kirigami.Page {
        title: "OverlayDrawer at the bottom"
        actions: [
            Kirigami.Action {
                text: "Open bottomDrawer"
                onTriggered: bottomDrawer.open()
            }
        ]
        Kirigami.OverlayDrawer {
            id: bottomDrawer
            edge: Qt.BottomEdge
            // Ställ in modal till false för att göra lådan på plats.
            modal: true

            contentItem: RowLayout {
                Controls.Label {
                    Layout.fillWidth: true
                    text: "Say hello to my little drawer!"
                }
                Controls.Button {
                    text: "Close"
                    onClicked: bottomDrawer.close()
                }
            }
        }
    }
}