Composants concernant les actions

Les actions de Kirigami sont utilisées pour ajouter des fonctionnalités aux composants.

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

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: { ... }
}

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 le bureau

Actions de page pour un périphérique mobile

Actions de page pour un périphérique mobile

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 ordinateur

Actions globales sur tiroirs pour un périphérique mobile

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 »

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 ordinateur

SwipeListItem sur un périphérique mobile

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.