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.

Din valda sidhuvudkomponent kan anges med den globala lådans egenskap header, och den ersätter den globala lådans titel. Det är användbart för att lägga till Kirigami.SearchField, till exempel:

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

While a Kirigami.GlobalDrawer displays global actions available throughout your application, a Kirigami.ContextDrawer should be used to display actions that are only relevant in certain contexts. This is usually used in separate pages.

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

På en skrivbordsdator, när ett fönster har tillräckligt med utrymme, visas sammanhangsberoende åtgärder som en del av gruppen actions på det övre verktygsraden. När utrymmet är begränsat, till exempel på en mobil eller i ett smalt fönster, döljs sammanhangsberoende åtgärder bakom en hamburgermeny på höger sida. Det skiljer sig från andra åtgärder i gruppen actions, nämligen actions.main, actions.left och actions.right; de göms inte i fönster med begränsat utrymme, utan dras istället ihop till sina respektive ikoner.

 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.

These two drawers are so similar because they can, in fact, be implemented using the same Kirigami component: Kirigami.OverlayDrawer. Here are a few important inherited properties of this component to keep in mind:

• 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()
                }
            }
        }
    }
}