Barres d'eines d'acció

Si bé les pàgines de Kirigami permeten posar amb facilitat un conjunt d'accions a la capçalera de la pàgina, hi ha ocasions en què potser preferireu tenir una mica més de flexibilitat.

El Kirigami proporciona el component Kirigami.ActionToolBar . Mostra una llista d'objectes Kirigami.Action i en mostrarà tants com sigui possible, proporcionant un menú desbordat per als que no encaixin. L'ActionToolBar és dinàmica i mourà les accions dins i fora del menú desbordat depenent de l'espai disponible.

Crear la nostra primera ActionToolBar

La disposició i la ubicació de la vostra Kirigami.ActionToolBar en realitat dependrà de vosaltres, encara que en nom de la facilitat d'ús, generalment és una bona idea cenyir-se a les convencions de la interfície d'usuari i col·locar la barra d'eines a prop de la part superior o inferior de la pàgina i que s'estengui en amplada.

Com la majoria dels altres components que mantenen accions, la Kirigami.ActionToolBar té una propietat accions . Podem assignar una matriu de components Kirigami.Action a aquesta propietat.

import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 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 { }
            }
        ]
    }

}

Alineació

De manera predeterminada, les accions a l'ActionToolBar s'alinearan a l'esquerra. Això pot no ser desitjable en totes les situacions. Afortunadament, podem canviar això amb la propietat alignment . Podem establir aquesta propietat en un interval de valors, però els tres més rellevants per a una ActionToolBar són Qt.AlignLeft, Qt.AlignCenter i Qt.AlignRight (els quals s'ocupen de l'alineació horitzontal).

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

        alignment: Qt.AlignCenter

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