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.

Componenten Kirigami.GlobalDrawer zijn wat we gebruiken om zulke laden te maken. Deze zijn ingesteld op de eigenschap globalDrawer van de Kirigami.ApplicationWindow dat 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()
			}
		]
	}

	...

}
Onze nieuwe globale schuiflade

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

Zoekbalkopschrift van globale schuiflade

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 onze globale schuifladen alleen op het bureaublad in meer traditionele menu's.

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 als een menu op het bureaublad

Voorlooppagina's

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

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"

	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

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.

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 overlays, 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, dezelfde Kirigami component: Kirigami.OverlayDrawer zijn. Belangrijke eigenschappen van deze component on te onthouden:

  • modal bestuurt of de schuiflade modaal of inline zal zijn afhankelijk van een booleaanse waarde
  • edge bestuurt aan welke rand van het toepassingenvenster de schuiflade zal verschijnen; opties voor deze eigenschap zijn Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge en Qt.LeftEdge
  • contentItem bevat de component die de inhoud vormt van uw schuiflade
import QtQuick.Controls 2.15 as QQC2

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

			QQC2.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()
	}

}

 <figure class="text-center"><img src="modal_drawer.png"
     alt="Modale schuiflade aan de onderrand van het venster."/><figcaption>
        <p>Modale schuiflade aan de onderrand van het venster.</p>
    </figcaption>
Inline schuiflade aan de onderrand van het venster.

Inline schuiflade aan de onderrand van het venster.

Een gebruiksgeval voor overlay schuifladen onderaan: NeoChat

NeoChat gebruikt overlayschuifladen 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();
               }
           }
           ...
       }
    }
}
Previous
Kaarten
Next
Overlay-vellen