Tiroirs
Les tiroirs sont des panneaux coulissant sur les côtés de la fenêtre de l’application. Ils peuvent être remplis d’éléments interactifs tels que des actions de Kirigami, des boutons, du texte, etc.
Les tiroirs sont proposés avec différents types, différentes formes et différents modèles. Dans cette page, nous allons passer en revue chaque type et donner un aperçu de leurs caractéristiques.
Tiroir global
Le tiroir global est une fonctionnalité standard dans les applications mobiles de KDE et peut parfois être aussi présent dans leurs versions de bureau. Il contient un menu principal d’une application. Ce qui est inclus sont toutes les fonctions qui ne sont pas spécifiques à la page en cours, mais qui sont importantes pour la navigation ou l’interaction générale au sein de l’application.
Les composants « Kirigami.GlobalDrawer » sont ceux que nous utilisons pour créer de tels tiroirs. Ils sont définis sur la propriété « globalDrawer » du composant « Kirigami.ApplicationWindow » constituant la base de notre application sous Kirigami.
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()
}
]
}
...
}
En-tête
Les en-têtes peuvent être utilisés pour placer des composants collants en haut de votre tiroir global. Les composants d’en-tête resteront en place même si votre tiroir global contient des actions de Kirigami imbriquées qui remplacent la couche actuelle du tiroir global.
Le composant d’en-tête que vous avez choisi peut être défini avec la propriété « header » du tiroir global.
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()
}
]
}
Notre tiroir global affiche maintenant le composant de la barre de recherche que nous avons défini comme en-tête.
Adaptation au bureau
Si les tiroirs globaux de type panneau peuvent être utiles dans les environnements mobiles, ils peuvent être trop grands sur le bureau.
Heureusement, les tiroirs globaux de Kirigami fournissent une propriété « isMenu ». Lorsqu’elle est définie à « True », nos tiroirs globaux se transforment en menus plus traditionnels uniquement sur le bureau.
Note
Dans ce mode de menu, les en-têtes et les bannières ne sont pas visibles.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()
}
]
}
Bannières
Les bannières vous permettent d’afficher un titre et une icône en haut de votre tiroir global (même au-dessus de l’en-tête).
Les titres, définis avec la propriété « title », peuvent être utilisés pour embellir votre tiroir global et le rendre moins clairsemé. Plus important encore, il peut rappeler à vos utilisateurs qu’il s’agit d’un tiroir global et à l’échelle de l’application plutôt que d’un tiroir local.
Il existe également une propriété « titleIcon » pouvant être associée à votre titre pour rendre le tiroir global encore plus esthétique. Cette icône sera placée à gauche du titre.
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()
}
]
}
Note
La propriété « titleIcon » prend les noms des icônes du système selon la spécification de FreeDesktop. Ces icônes et leurs noms peuvent être affichés avec l’application CuttleFish de KDE, ou en visitant la page de spécification des nommages d’icônes de FreeDesktop.Toutefois, par défaut, les bannières ne sont visibles que sur les environnements mobiles. Vous pouvez changer cela en définissant la propriété « bannerVisible » du composant global du tiroir à « True ».
Tiroirs modaux et intégrés
Kirigami propose deux autres types de tiroirs, les tiroirs modaux et les tiroirs intégrés. Ils sont assez semblables l’un à l’autre. Tous deux s’étendent sur toute la largeur ou la hauteur de l’application et peuvent être placés sur les bords de la fenêtre de l’application. Cependant, ils réagissent différemment lors d’une interaction avec l’utilisateur.
- Les tiroirs modaux assombrissent le reste de l’application et, comme les feuilles de recouvrement, sont rejetés lors d’un clic sur une zone assombrie.
- Les tiroirs intégrés permettent à l’utilisateur de continuer à interagir avec le reste de l’application sans être renvoyé et n’assombrissent pas les autres zones.
Ces deux tiroirs sont si semblables car ils sont, en fait, le même composant de Kirigami : « Kirigami.OverlayDrawer ». Les propriétés importantes de ce composant à conserver à l’esprit :
- « modal » contrôle si le tiroir sera modal ou intégré, selon sa valeur booléenne.
- Le paramètre « edge » contrôle le bord de la fenêtre de l’application sur lequel le tiroir apparaîtra. Les options pour cette propriété sont « Qt.TopEdge », « Qt.RightEdge », « Qt.BottomEdge » et « Qt.LeftEdge ».
- « contentItem » contient le composant qui formera le contenu de votre tiroir.
import QtQuick.Controls 2.15 as QQC2
Kirigami.Page {
Kirigami.OverlayDrawer {
id: bottomDrawer
edge: Qt.BottomEdge
// Définissez le paramètre « modal » à « False » pour que ce tiroir soit en ligne !
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="Tiroir modal sur le bord inférieur de l&rsquo;écran."/><figcaption>
<p>Tiroir modal sur le bord inférieur de l’écran.</p>
</figcaption>
Tiroir intégré sur le bord inférieur de l’écran.
Un cas d’utilisation pour les tiroirs à fond superposé : NeoChat
NeoChat utilise des tiroirs superposés en bas de page pour proposer aux utilisateurs un certain nombre d’actions pouvant effectuer sur un message sur lequel ils ont réalisés un appui long. Voici un exemple simplifié de ce à quoi cela ressemble :
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
// Informations sur le message
...
// Actions de messages
Kirigami.BasicListItem {
text: "Reply"
onClicked: {
bottomDrawer.close();
}
}
...
}
}
}