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. ActionToolBar és dinàmic 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 actions. Podem assignar una matriu de components Kirigami.Action a aquesta propietat.

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 { }
            }
        ]
    }

}

Alineació

De manera predeterminada, les accions a 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!") 
            }
        ]
    }
    
}