Action toolbars

Embora as páginas do Kirigami lhe permitam facilmente colocar um conjunto de acções no cabeçalho da página, existem ocasiões em que poderá preferir ter algo mais flexível.

O Kirigami oferece o componente Kirigami.ActionToolBar . O mesmo irá mostrar uma lista de objectos Kirigami.Action e irá mostrar o máximo possível, oferecendo um menu com o excedente para os que não couberem. O ActionToolBar é dinâmico e irá mover as acções para dentro e para fora do menu excedentário, dependendo do tamanho disponível para ele.

Criar a nossa primeira ActionToolBar

A disposição e localização do seu Kirigami.ActionToolBar são realmente à sua escolha se bem que, por questões de usabilidade, é normalmente uma boa ideia seguir as convenções de interfaces e colocar a sua barra de ferramentas perto do topo ou do fundo da sua página, tendo-a disposta em toda a largura do ecrã.

Como na maioria dos componentes que contêm acções, o Kirigami.ActionToolBar tem uma propriedade actions . Podemos atribuir uma lista de componentes Kirigami.Action a esta propriedade.

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

}

Alinhamento

Por omissão, as acções na ActionToolBar estarão alinhadas à esquerda. Isto poderá não ser o desejável em todas as situações. Felizmente, podemos alterar isto com a propriedade alignment . Podemos configurar esta propriedade com um conjunto de valores, mas os três mais relevantes para uma ActionToolBar são o Qt.AlignLeft, Qt.AlignCenter e Qt.AlignRight (que lidam com o alinhamento 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!") 
            }
        ]
    }
    
}