Composants concernant les actions
Actions
Une action de Kirigami encapsule une action pour l'interface utilisateur. Nous pouvons les utiliser pour fournir à nos applications des actions faciles d'accès, essentielles à leur fonctionnalité.
Note
Kirigami actions inherit from Qt Quick Controls 2 Action and can be assigned shortcuts.Comme les actions de contrôles de QtQuick, elles peuvent être affectées aux éléments de menu et aux boutons de la barre d'outils, mais aussi à plusieurs autres composants de Kirigami.
import org.kde.kirigami 2.13 as Kirigami
Kirigami.Action {
id: copyAction
text: i18n("&Copy")
icon.name: "edit-copy"
shortcut: StandardKey.Copy
onTriggered: { ... }
}
Note
La propriété « icon.name » 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 le site de spécification des noms d'icônes pour FreeDesktop.Une fonctionnalité offerte par les actions de Kirigami, au dessus des actions QtQuick Actions, est la possibilité d'imbriquer des actions.
import org.kde.kirigami 2.13 as Kirigami
Kirigami.Action {
text: "View"
icon.name: "view-list-icons"
Kirigami.Action {
text: "action 1"
}
Kirigami.Action {
text: "action 2"
}
Kirigami.Action {
text: "action 3"
}
}
Une autre fonctionnalité des actions de Kirigami est de pouvoir fournir diverses indications aux éléments utilisant des actions concernant la façon de faire leur affichage. Ces indications sont principalement gérées par les propriétés « displayHint » et « displayComponent ».
Ces propriétés seront respectées par l'élément si possible. Par exemple, l'action suivante sera affichée en tant que champ de texte avec l'élément faisant de son mieux pour que l'élément reste visible le plus longtemps possible.
import org.kde.kirigami 2.13 as Kirigami
Kirigami.Action {
text: "Search"
icon.name: "search"
displayComponent: TextField { }
displayHint: Kirigami.DisplayHints.KeepVisible
}
Utilisation des actions dans d'autres composants
Page
L'une des caractéristiques des pages est que des actions peuvent y être ajoutées.
Vous pouvez ajouter une action principale, une action pour la gauche et la droite et des actions contextuelles supplémentaires, s'affichant dans la barre d'outils, à condition d'avoir suffisamment de place ou dans un menu en hamburger sur les écrans plus petits.
import org.kde.kirigami 2.13 as Kirigami
Kirigami.Page {
title: i18n("Demo")
actions {
main: Kirigami.Action {
icon.name: "go-home"
onTriggered: showPassiveNotification(i18n("Main action triggered"))
}
left: Kirigami.Action {
icon.name: "go-previous"
onTriggered: showPassiveNotification(i18n("Left action triggered"))
}
right: Kirigami.Action {
icon.name: "go-next"
onTriggered: showPassiveNotification(i18n("Right action triggered"))
}
contextualActions: [
Kirigami.Action {
text: i18n("Contextual Action 1")
icon.name: "bookmarks"
onTriggered: showPassiveNotification(i18n("Contextual action 1 clicked"))
},
Kirigami.Action {
text: i18n("Contextual Action 2")
icon.name: "folder"
enabled: false
}
]
}
}
Actions de page pour le bureau
Actions de page pour un périphérique mobile
Avertissement
To make the context actions work on mobile, you need to add a ContextDrawer to your Kirigami.ApplicationWindow .
Kirigami.ApplicationWindow {
...
contextDrawer: Kirigami.ContextDrawer {
id: contextDrawer
}
...
}
Tiroir global
Le tiroir global fournit à votre application à une navigation reposant sur des actions. C'est à cet endroit que les actions imbriquées sont utiles car elles vous permettent de créer une navigation imbriquée :
Kirigami.ApplicationWindow {
title: i18n("Demo")
globalDrawer: Kirigami.GlobalDrawer {
title: i18n("Demo")
titleIcon: "applications-graphics"
actions: [
Kirigami.Action {
text: i18n("View")
icon.name: "view-list-icons"
Kirigami.Action {
text: i18n("View Action 1")
onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
}
Kirigami.Action {
text: i18n("View Action 2")
onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
}
},
Kirigami.Action {
text: i18n("Action 1")
onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
},
Kirigami.Action {
text: i18n("Action 2")
onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
}
]
}
...
}
Actions globales sur tiroirs pour un ordinateur
Actions globales sur tiroirs pour un périphérique mobile
Vous pouvez en apprendre plus sur les tiroirs globaux dans la page de documentation sur les tiroirs.
ActionTextFields
Un paramètre Kirigami ActionTextField est utilisé pour ajouter certaines actions contextuelles à un champ de texte, par exemple pour effacer le texte ou pour rechercher un texte.
Kirigami.ActionTextField {
id: searchField
rightActions: [
Kirigami.Action {
icon.name: "edit-clear"
visible: searchField.text !== ""
onTriggered: {
searchField.text = ""
searchField.accepted()
}
}
]
}
Dans cet exemple, nous créons un bouton d'effacement pour un champ de recherche uniquement visible lorsque du texte est saisi.
! Champ de recherche avec le texte : « Je veux »
Note
You should only rarely use an ActionTextField directly. The two major use cases for an ActionTextField are provided by SearchField and PasswordField . Both inherit from ActionTextField.SwipeListItem
Un objet SwipeListItem est un délégué destiné à prendre en charge des actions supplémentaires. Lorsque vous utilisez une souris, ils s'affichent au survol. Sur un périphérique tactile, ils peuvent être affichés en faisant glisser l'élément avec la poignée.
ListView {
model: myModel
delegate: SwipeListItem {
QQC2.Label {
text: model.text
}
actions: [
Action {
icon.name: "document-decrypt"
onTriggered: print("Action 1 clicked")
},
Action {
icon.name: model.action2Icon
onTriggered: // Faire quelque chose
}
]
}
}
SwipeListItem sur un ordinateur
SwipeListItem sur un périphérique mobile
ActionToolBar
Un objet ActionToolBar est une barre d'outils construite à partir d'une liste d'actions. Par défaut, chaque action correspondant à la barre d'outils sera représenté par un bouton « ToolButton », alors que celles ne correspondant pas seront déplacés dans un menu, à la fin de la barre d'outils.
Comme pour le champ « ActionTextField », vous n'aurez peut-être pas besoin d'utiliser directement « ActionToolBar » car elle est utilisée par les en-têtes de page et les cartes pour afficher leurs actions.
Kirigami.ActionToolBar {
actions: [
Kirigami.Action {
text: i18n("View Action 1")
onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
},
Kirigami.Action {
text: i18n("View Action 2")
onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
},
Kirigami.Action {
text: i18n("Action 1")
onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
},
Kirigami.Action {
text: i18n("Action 2")
onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
}
]
}
Vous pouvez en apprendre plus sur les composants « ActionToolBar » grâce à la page de documentation dédiée.
Cartes
Les composants de cartes peuvent également effectuer une action. Pour plus d'informations, veuillez consulter la page des composants pour les cartes.