Barras de herramientas de acciones
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 provides the component Kirigami.ActionToolBar . It displays a list of Kirigami.Action objects and will display as many of them as possible, providing an overflow menu for the ones that don't fit. The ActionToolBar is dynamic and will move actions in and out of the overflow menu depending on the size available to it.
Nota
This page assumes you are familiar with Kirigami.Action objects. If you are not, you can learn all about them in our beginner tutorial or in the dedicated documentation page for them.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.
Like most other action-holding components, Kirigami.ActionToolBar has an actions property. We can assign an array of Kirigami.Action components to this property.
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 { }
}
]
}
}

ActionToolBar con suficiente espacio para todas las acciones hijas

ActionToolBar con un menú de sobrantes que contiene acciones hijas
Alineación
By default, actions in the ActionToolBar will be left aligned. This might not be desirable in all situations. Thankfully we can change this with the
alignment
property. We can set this property to a range of values, but the three most relevant ones are Qt.AlignLeft
, Qt.AlignCenter
, and Qt.AlignRight
(which deal with
horizontal alignment
).
Controls.GroupBox {
Layout.fillWidth: true
Kirigami.ActionToolBar {
anchors.fill: parent
alignment: Qt.AlignCenter
actions: [
Kirigami.Action {
text: "Beep"
icon.name: "notifications"
onTriggered: showPassiveNotification("BEEP!")
}
]
}
}
