Action toolbars
About Kirigami API documentation: use https://api-staging.kde.org/kirigami-index.html for now
Click here to read more
We are aware of issues involving broken links to Kirigami API documentation. We are currently working on a better website to address these issues, porting the API docs where possible.
In its current state, the staging API website under development for Kirigami can be used to access all relevant Kirigami API pages, and it should already work better than the previous API website. You can access the staging API website through https://api-staging.kde.org/kirigami-index.html.
If you'd like to assist us in our efforts to port the API documentation, take a look at our Port API documentation to QDoc metatask.
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.
Nota
Esta página assume que está familiarizado com os objectos Kirigami.Action. Se não estiver, poderá aprender tudo sobre eles no nosso tutorial para principiantes ou na página dedicada da documentação sobre eles.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 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!")
}
]
}
}
}
}