Action toolbars

Crie as suas próprias barras de ferramentas personalizadas com o componente ActionToolBar

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
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    id: root

    title: "ActionToolBar App"
    width: 600
    height: 400

    pageStack.initialPage: Kirigami.Page {
        Kirigami.ActionToolBar {
            anchors.left: parent.left
            anchors.right: parent.right

            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 { }
                }
            ]
        }
    }
}
O ActionToolBar com espaço suficiente para todos os seus filhos

O ActionToolBar com espaço suficiente para todos os seus filhos

O ActionToolBar com um menu excedentário que contém filhos

O ActionToolBar com um menu excedentário que contém filhos

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

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    id: root

    title: "ActionToolBar App"
    width: 600
    height: 400

    pageStack.initialPage: Kirigami.Page {
        Controls.GroupBox {
            anchors.left: parent.left
            anchors.right: parent.right

            Kirigami.ActionToolBar {
                anchors.fill: parent

                alignment: Qt.AlignCenter

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

ActionToolBar with children center-aligned