Schuifladen

Schuifladen zijn panelen die aan de zijkanten van het toepassingenvenster uitschuiven. Ze kunnen bevolkt worden met interactieve elementen zoals Kirigami acties, knoppen, tekst en meer.

Schuifladen komen in verschillende typen, vormen en formulieren. In deze pagina bespreken we elk type en leveren een overzicht van hun karakteristieken.

Globale schuiflade

De globale schuiflade is een standaard functie in de mobiele toepassingen van KDE en kunnen soms ook in hun incarnaties op het bureaublad zijn te vinden. Deze bevat een hoofdmenu van de toepassing: hierin zit alle functies die niet specifiek zijn voor de huidige pagina maar nog steeds significant voor de algemene navigatie of interactie met de toepassing.

Het kan geactiveerd worden door op het hamburgermenu te tikken of door vegen van de linker rand naar het midden van het scherm in modus Links-naar-rechts of vanaf de rechter rand in modus Rechts-naar-links.

Componenten Kirigami.GlobalDrawer zijn wat we gebruiken om zulke laden te maken. Deze zijn ingesteld op de eigenschap globalDrawer van de Kirigami.ApplicationWindow die de basis vormt van onze Kirigami toepassing.

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

Koptekst

Er kunnen opschriften gebruikt worden om plakcomponenten te plaatsen bovenaan uw globale schuiflade. Deze opschriftcomponenten blijven op hum plaats zelfs als uw globale schuiflade geneste Kirigami acties bevatten die de huidige laag in de globale schuiflade vervangen.

Uw gekozen opschriftcomponent kan ingesteld worden met de globale eigenschap van de schuiflade header en zal vervangen worden door de titel van de globale schuiflade. Dit is nuttig om een Kirigami.SearchField toe te voegen, bijvoorbeeld:.

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

Aanpassen voor het bureaublad

Terwijl paneel-stijl globale schuifladen nuttig kunnen zijn in mobiele omgevingen, kunnen ze te groot zijn op het bureaublad, speciaal wanneer de toepassing weinig acties heeft.

Gelukkig leveren Kirigami globale schuifladen een eigenschap isMenu. Wanneer ze op true zijn gezet, veranderen ze alleen op het bureaublad in meer traditionele menu's.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        // Hier Kirigami-acties...
    ]
}

Context van schuifladen

Terwijl een Kirigami.GlobalDrawer globale acties toont beschikbaar in geheel uw toepassing, zou een Kirigami.ContextDrawer gebruikt moeten worden om acties te tonen die alleen relevant zijn in een bepaalde context. Dit wordt gewoonlijk gebruikt in gescheiden pagina's.

Een contextschuiflade zal alleen verschijnen als een contextualActions is aangemaakt als onderdeel van de Page.actions groep. Het gedraagt verschillend afhankelijk van of het wordt gebruikt op een mobielplatform of op een bureaublad.

Op een bureaublad, wanneer een venster genoeg ruimte heeft, verschijnen contextuele acties als deel van de groep acties in de werkbalk boven. Wanneer ruimte beperkt is, zoals op een mobiel apparaat of in een nauw venster, worden contextuele acties verborgen achter een hamburgermenu rechts. Dit is anders uit andere acties in de groep acties, namelijk actions.main, actions.left en actions.right; dezen worden niet verborgen in vensters met beperkte ruimte en worden in plaats daarvan ingevouwen in hun respectievelijke pictogrammen.

 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"
            }
        ]
    }
}

Op een mobiel bevat de schuiflade altijd acties verborgen achter een hamburgermenu. Het kan geactiveerd worden door op het hamburgermenu te tikken of door vegen van de rechter rand naar het midden van het scherm in modus Links-naar-rechts of vanaf de linker rand in modus Rechts-naar-links.

Modale en inline schuifladen

Kirigami biedt twee extra typen schuifladen, modale schuifladen en inline schuifladen. Ze tamelijk gelijk aan elkaar: beiden overspannen de gehele breedte of hoogte van de toepassing en kunnen aan de randen van het toepassingsvenster geplaatst worden. Ze reageren echter verschillend op interactie met de gebruiker.

• Modale schuifladen zijn standaard verborgen en verdonkeren de rest van de toepassing en afgewezen door klikken op een verdonkerd gebied.
• Inline schuifladen worden standaard getoond en bieden de gebruiker nog steeds interactie te hebben met de rest van de toepassing zonder afgewezen te worden en verdonkeren andere gebieden niet.

Dit soort schuifladen hebben een open eind en zijn flexibel, maar in het algemeen zal u dit soort schuiflade willen gebruiken als u een kleine lijst met keuzes wilt laten verschijnen nadat er langdurig geklikt of rechts geklikt is.

Deze twee schuifladen zijn zo gelijk omdat ze, in feite, met gebruik van dezelfde Kirigami component: Kirigami.OverlayDrawer zijn geïmporteerd. Hier zijn enkele belangrijke geërfde eigenschappen van deze component om te onthouden:

• Popup.modal bestuurt of de schuiflade modaal of inline zal zijn afhankelijk van een booleaanse waarde.
• Drawer.edge bestuurt aan welke rand van het toepassingenvenster de schuiflade zal verschijnen; opties voor deze eigenschap zijn onderdeel van de Edge enum, met name Qt.TopEdg, Qt.RightEdge, Qt.BottomEdge en Qt.LeftEdge.
• Popup.contentItem bevat de component die de inhoud vormt van uw schuiflade.

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
            // Modal op false zetten om deze schuiflade inline te maken!
            modal: true

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