Barres d'actions des outils

Si les pages de Kirigami vous permettent de placer facilement un ensemble d'actions dans l'en-tête de la page, il y a quelques fois où vous préfériez quelque chose de plus souple.

Kirigami fournit le composant « Kirigami.ActionToolBar ». Il affichera une liste d'objets « Kirigami.Action » et en affichera le plus grand nombre possible, en fournissant un menu de débordement pour ceux qui le peuvent pas. La barre d'outils d'action est dynamique et déplacera les actions dans le menu de débordement, selon la taille disponible.

Création de notre première ActionToolBar

La disposition et l'emplacement de votre objet « Kirigami.ActionToolBar » dépendent vraiment de vous. Pour des raisons de convivialité, il est généralement conseillé de respecter les conventions de l'interface utilisateur et de placer votre barre d'outils en haut ou en bas de votre page et de l'étendre dans le sens de la largeur.

Comme la plupart des autres composants d'actions, « Kirigami.ActionToolBar » possède une propriété « actions ». Nous pouvons affecter un tableau de composants « Kirigami.Action » à cette propriété.

import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami

Kirigami.Page {

    Kirigami.ActionToolBar {
        anchors.fill: parent

         actions: [
            Kirigami.Action { 
                text: "Beep" 
                icon.name: "notifications" 
                onTriggered: showPassiveNotification("BEEP!") 
            },
            Kirigami.Action { 
                text: "Action Menu" 
                icon.name: "overflow-menu"

                Kirigami.Action { 
                    text: "Deet"; 
                    icon.name: "notifications" 
                    onTriggered: showPassiveNotification("DEET!") 
                }
                Kirigami.Action { 
                    text: "Doot"; 
                    icon.name: "notifications" 
                    onTriggered: showPassiveNotification("DOOT!") 
                }
            },
            Kirigami.Action {
                icon.name: "search"
                displayComponent: Kirigami.SearchField { }
            }
        ]
    }

}

Alignement

Par défaut, les actions de la barre d'outils d'actions sont alignées à gauche. Cela n'est pas forcément souhaitable dans toutes les situations. Heureusement, nous pouvons changer cela avec la propriété « alignment ». Nous pouvons définir cette propriété dans une gamme de valeurs, mais les trois plus pertinentes pour un objet « ActionToolBar » sont « Qt.AlignLeft », « Qt.AlignCenter » et « Qt.AlignRight » (traitant l'alignement horizontal).

Controls.GroupBox {
    Layout.fillWidth: true
        
    Kirigami.ActionToolBar {
        anchors.fill: parent

        alignment: Qt.AlignCenter

        actions: [
            Kirigami.Action { 
                text: "Beep" 
                icon.name: "notifications" 
                onTriggered: showPassiveNotification("BEEP!") 
            }
        ]
    }
    
}