Lådor

Lådor tillhandahåller snabbåtkomst till kontroller och sidor i ditt program.

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.

Kirigami.GlobalDrawer komponenter är vad vi använder för att skapa sådana lådor. De ställs in till egenskapen globalDrawer från Kirigami.ApplicationWindow som utgör basen för vårt Kirigami-program.

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

	...

}
Vår nya globala låda

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.

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

Global låda med sökradshuvud

Vår globala låda visar nu sökradskomponenten som vi angav som sidhuvud.

Anpassa till skrivbordet

Medan globala lådor med panelstil kan vara användbara i mobilomgivningar, kan de vara för stora för skrivbordsdatorer.

Som tur är tillhandahåller Kirigami globala lådor egenskapen isMenu. När den är inställd till true, förvandlas vår globala låda till mer traditionella menyer på skrivbordsdatorer.

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()
		}
	]
}
Global låda som en meny på skrivbordet

Baner

Baner låter dig visa en titel och en ikon längst upp i din globala låda (till och med ovanför sidhuvudet).

Titlar, som ställs in med egenskapen title, kan användas för att snygga till den globala lådan och få den att se mindre gles ut. Av större vikt är att den kan påminna användaren att det här är en global och programomfattande låda istället för en lokal låda.

Egenskapen titleIcon finns också, som kan paras ihop med titeln för att göra den globala lådan ännu mer estetiskt tilltalande. Ikonen placeras till vänster om titeln.

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()
		}
	]
}
Global låda med titel och ikon i baner

Dock är baner normalt bara synliga i mobilomgivningar. Du kan ändra det genom att ställa in komponentens egenskap bannerVisible till true i den globala lådan.

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, liksom överlagringsblad, avfärdas vid klick på ett mörkare område.
  • Lådor på plats låter användaren fortsätta interagera med resten av programmet utan att de avfärdas, och gör inte andra områden mörkare.

De här två lådorna är så liknande eftersom de i själva verket är samma komponent i Kirigami: Kirigami.OverlayDrawer. Viktiga egenskaper i komponenten att hålla i minnet:

  • modal styr om lådan är modal eller på plats beroende på ett Booleskt värde
  • 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
  • contentItem innehåller komponenterna som utgör lådans innehåll
Kirigami.Page {

	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 {
			Layout.fillWidth: true

			Kirigami.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="Modal låda vid skärmens underkant."/><figcaption>
        <p>Modal låda vid skärmens underkant.</p>
    </figcaption>
Låda på plats vid skärmens underkant.

Låda på plats vid skärmens underkant.

Ett användarfall för överlagrade nedre lådor: NeoChat

NeoChat använder överlagrade nedre lådor för att ge användaren ett antal åtgärder de kan utföra med ett meddelande de har tryckt på länge. Här är ett förenklat exempel på hur det ser ut:

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
           
           // Meddelandeinformation
           ...
           
           // Meddelandeåtgärder
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}