Barras de herramientas de acciones

Cree sus propias barras de herramientas personalizables con el componente ActionToolBar

Aunque las páginas de Kirigami le permiten situar con facilidad un conjunto de acciones en la cabecera de la página, hay veces en las que preferirá tener algo más flexible.

Kirigami proporciona el componente Kirigami.ActionToolBar. Muestra una lista de objetos Kirigami.Action que contendrá tantos como sea posible, proporcionando un menú de sobrantes para los que no quepan en ella. La ActionToolBar es dinámica y moverá acciones dentro y fuera del menú de sobrantes dependiendo del tamaño disponible para ella.

Creando su primera ActionToolBar

El diseño y la ubicación de su Kirigami.ActionToolBar dependen realmente de usted, aunque en aras de la facilidad de uso, suele ser una buena idea ceñirse a las convenciones de interfaces de usuario y colocar la barra de herramientas cerca de la parte superior o inferior de la página y que se extienda a lo ancho.

Como la mayoría del resto de componentes que contienen acciones, Kirigami.ActionToolBar tiene una propiedad actions. Podemos asignar una matriz de componentes Kirigami.Action a dicha propiedad.

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 { }
                }
            ]
        }
    }
}
ActionToolBar con suficiente espacio para todas las acciones hijas

ActionToolBar con suficiente espacio para todas las acciones hijas

ActionToolBar con un menú de sobrantes que contiene acciones hijas

ActionToolBar con un menú de sobrantes que contiene acciones hijas

Alineación

Por omisión, las acciones de una ActionToolBar estarán alineadas a la izquierda. Es posible que esto no sea deseable en todas las situaciones. Afortunadamente, podemos cambiar esto con la propiedad alignment. Podemos definir esta propiedad con diversos valores, pero los tres más relevantes son Qt.AlignLeft, Qt.AlignCenter y Qt.AlignRight (que se ocupan del alineamiento 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 con acciones hijas centradas