Tiroirs

Les tiroirs permettent aux applications d’accéder rapidement aux contrôles et aux pages de votre application.

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

 ! Un tiroir global avec en-tête pour barre de recherche

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.

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

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.
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

			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="Tiroir modal sur le bord inférieur de l&amp;rsquo;écran."/><figcaption>
        <p>Tiroir modal sur le bord inférieur de l&rsquo;écran.</p>
    </figcaption>
Tiroir intégré sur le bord inférieur de l&rsquo;écran.

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