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.
It can be activated by tapping the hamburger menu or by swiping from the left edge to the middle of the screen in Left to Right mode or from the right edge in Right to Left mode.
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.
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()
}
]
}
...
}

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

Our global drawer now shows the search bar component we set as the header
Anpassa till skrivbordet
Medan globala lådor med panelstil kan vara användbara i mobilomgivningar, kan de vara för stora för skrivbordsdatorer.
Thankfully, Kirigami global drawers provide an
isMenu
property. When set to true
, they turn into more traditional menus only on the desktop.
Anmärkning
I menyläget är inte sidhuvuden och baner synliga.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 drawer in menu mode, without a header or banner
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).
By default, banners are only visible on mobile environments. You can change this by setting the global drawer component's
bannerVisible
property to true
.
Titles, set with the title property, can be used to pretty up your global drawer and make it seem less sparse. More importantly, it can remind your users that this is a global and app-wide drawer rather than a local drawer.
There is also a titleIcon property, which can be paired with your title to make the global drawer even more aesthetically pleasing. This icon will be placed to the left of the title.
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()
}
]
}

Global drawer with title and icon in banner
Anmärkning
The titleIcon property takes names for system-wide icons according to the FreeDesktop specification. These icons and icon names can be viewed with KDE's CuttleFish application which comes with plasma-sdk, or by visiting FreeDesktop's icon naming specification.Context Drawers
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.
A context drawer will only show up if any contextualActions have been created as part of the Page.actions group . It also behaves differently depending on whether it is being used on a mobile platform or on a desktop.
On a desktop, when a window has enough space, contextual actions show up as part of the actions
group in the top toolbar. When space is limited, such as on a mobile device or in a narrow window, contextual actions are hidden behind a hamburger menu on the right side. This is different from other actions in the actions
group, namely actions.main
, actions.left
and actions.right
; these do not get hidden in space-constrained windows, and are instead collapsed into their respective icons.
|
|

Context drawer with contextual actions hidden

Context drawer showing all contextual actions
On mobile, the drawer always consists of actions hidden behind a hamburger menu. It can be activated by tapping the hamburger menu or by swiping from the right edge to the middle of the screen in Left to Right mode or from the left edge in Right to Left mode. If you are on a desktop and want to test the mobile interface, you can run your application with the environment variable QT_QUICK_CONTROLS_MOBILE=1
.

Same example above, running in mobile mode

Context drawer open in mobile mode
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.
- Modal drawers darken the rest of the application and, like overlay sheets , will be dismissed when clicking on a darkened area.
- 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.
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 controls whether the drawer will be modal or inline depending on a boolean value
- Drawer.edge controls which edge of the application window the drawer will appear on; options for this property are part of the
Edge enum
, namely
Qt.TopEdge
,Qt.RightEdge
,Qt.BottomEdge
, andQt.LeftEdge
- Popup.contentItem contains the component that will form the content of your drawer
import QtQuick.Controls 2.15 as Controls
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
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()
}
}

Modal drawer on the bottom edge of the screen

Inline drawer on the bottom edge of the screen
A use case for bottom overlay drawers: NeoChat
NeoChat uses bottom overlay drawers to provide the user with a number of actions they can perform on a message they have long pressed. Here is a simplified example of what that looks like:
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();
}
}
...
}
}
}