Schuifladen

Schuifladen bieden toepassingen snelle toegang tot besturing en pagina's van uw toepassing.

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.

Kirigami.ApplicationWindow {

    globalDrawer: Kirigami.GlobalDrawer {
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "gtk-quit"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
    ...
}

Schermafdruk van een globale schuiflade in modus bureaublad die lijkt op een zijbalk

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.

globalDrawer: Kirigami.GlobalDrawer {

    header: Kirigami.AbstractApplicationHeader {

        contentItem: Kirigami.SearchField {
            id: searchField
            Layout.fillWidth: true
        }
    }

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

Onze globale schuiflade toont nu de zoekbalkcomponent die we als het opschrift instellen

Aanpassen voor het bureaublad

Terwijl paneel-stijl globale schuifladen nuttig kunnen zijn in mobiele omgevingen, kunnen ze te groot zijn op het bureaublad.

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.

Notitie

In deze menumodus, zijn opschriften en banners niet zichtbaar.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

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

Globale schuiflade in modus menu, zonder een kop of banner

Voorlooppagina's

Banners bieden u het tonen van een titel en een pictogram bovenaan uw globale schuiflade (zelfs boven het opschrift).

Standaard zijn banners echter alleen zichtbaar in mobiele omgevingen. U kunt dit wijzigen door de global de eigenschap bannerVisible van de schuifladecomponent op true te zetten.

Titels, ingesteld met de eigenschap title , kunnen gebruikt worden om uw globale schuiflade mooier te maken en laat het minder zeldzaam te maken. Belangrijker, het kan uw gebruikers er aan herinneren dat dit een globale toepassingsbrede schuiflade is in plaats van een lokale schuiflade.

Er is ook een eigenschap titleIcon , die gepaard kan worden met uw titel om de globale schuiflade nog esthetischer en aantrekkelijker te maken. Dit pictogram zal links van de titel geplaatst worden.

globalDrawer: Kirigami.GlobalDrawer {
    title: "My Global Drawer"
    titleIcon: "kde"
    bannerVisible: true
    actions: [
        Kirigami.Action {
            text: "Kirigami Action 1"
        },
        Kirigami.Action {
            text: "Kirigami Action 2"
        },
        Kirigami.Action {
            text: i18n("Quit")
            icon.name: "application-exit"
            shortcut: StandardKey.Quit
            onTriggered: Qt.quit()
        }
    ]
}

Globale schuiflade met titel en pictogram in banner

Notitie

De eigenschap titleIcon neemt namen voor systeembrede pictogrammen volgens de FreeDesktop-specificatie. Deze pictogrammen en pictogramnamen kunnen bekeken worden met de toepassing CuttleFish van KDE, die meekomt met plasma-sdk of door Specificatie van pictogrambenaming van FreeDesktop.

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
44
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    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 {
            main: Kirigami.Action {
                icon.name: "media-record"
            }
            left: Kirigami.Action {
                icon.name: "arrow-left"
            }
            right: Kirigami.Action {
                icon.name: "arrow-right"
            }
            contextualActions: [
                Kirigami.Action {
                    text: "Contextual Action 1"
                    icon.name: "media-playback-start"
                },
                Kirigami.Action {
                    text: "Contextual Action 2"
                    icon.name: "media-playback-stop"
                }
            ]
        }
    }
}

Contextschuiflade met contextuele verborgen acties

Contextschuiflade die contextuele acties toont

Op een mobiel bestaat de schuiflade altijd uit acties verborgen achter een hamburgermenu. Het kan geactiveerd worden door op het hamburgermenu te tikken of door vegen vanaf de rechter rand naar het midden van het scherm in modus Links-naar-rechts or vanaf de linker rand in modus Rechts-naar-links. Als u op een bureaublad bent en het mobielinterface wilt testen, dan kunt u uw toepassing uitvoeren met de omgevingsvariabele QT_QUICK_CONTROLS_MOBILE=1.

Zelfde als bovenstaand voorbeeld, uitgevoerd in modus mobiel

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 verdonkeren de rest van de toepassing en, zoals overlay sheets , verdwijnen bij klikken op een verdonkerd gebied.
Inline schuifladen laten de gebruiker nog steeds interactie hebben met de rest van de toepassing zonder te verdwijnen, en verdonkeren andere gebieden niet.

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.Controls 2.15 as Controls

Kirigami.Page {

    Kirigami.OverlayDrawer {
        id: bottomDrawer
        edge: Qt.BottomEdge
        // Modal op false zetten om deze schuiflade inline te maken!
        modal: true

        contentItem: RowLayout {
            Layout.fillWidth: true

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

    Controls.Button {
        text: "Open bottomDrawer"
        onClicked: bottomDrawer.open()
    }
}

Modale schuiflade aan de onderrand van het venster

Inline schuiflade aan de onderrand van het venster

Een gebruiksgeval voor overlay-schuifladen onderaan: NeoChat

NeoChat gebruikt overlay-schuifladen onderaan om de gebruiker te voorzien van een aantal acties die uitgevoerd kunnen worden op een bericht waarop lang is gedrukt. Hier is een eenvoudig voorbeeld over hoe dat er uitziet:

Kirigami.Page {

    ListView {
        model: App.MessageModel
        delegate: MessageDelegate {
            onPressAndHold: bottomDrawer.open()
        }
    }

   Kirigami.OverlayDrawer {
       id: bottomDrawer
       height: popupContent.implicitHeight
       edge: Qt.BottomEdge
       padding: 0
       leftPadding: 0
       rightPadding: 0
       bottomPadding: 0
       topPadding: 0

       parent: applicationWindow().overlay

       ColumnLayout {
           id: popupContent
           width: parent.width
           spacing: 0
           
           // Berichtinformatie
           ...
           
           // Berichtacties
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}

Kaarten

Chips