Componentes baseados em acções
Acções
Uma Acção do Kirigami encapsula uma acção da interface do utilizador. Podemos usá-las para oferecer às nossas aplicações acções fáceis de aceder e que são essenciais à sua funcionalidade..
Nota
Kirigami actions inherit from Qt Quick Controls 2 Action and can be assigned shortcuts.Como as Acções dos Controlos de QtQuick, as mesmas poderão ser associadas não só aos itens do menu e aos botões das barras de ferramentas, mas também a vários outros componentes do Kirigami.
import org.kde.kirigami 2.13 as Kirigami
Kirigami.Action {
id: copyAction
text: i18n("&Copy")
icon.name: "edit-copy"
shortcut: StandardKey.Copy
onTriggered: { ... }
}
Nota
A propriedadeicon.name
recebe os nomes dos ícones de sistema de acordo com a especificação do FreeDesktop. Estes ícones e nomes de ícones podem ser vistos com a aplicação Cuttlefish do KDE, ou indo à especificação de nomes de ícones do FreeDesktop.Uma funcionalidade oferecida pelas Acções do Kirigami sobre as Acções do QtQuick é a possibilidade de encadear acções.
import org.kde.kirigami 2.13 as Kirigami
Kirigami.Action {
text: "View"
icon.name: "view-list-icons"
Kirigami.Action {
text: "action 1"
}
Kirigami.Action {
text: "action 2"
}
Kirigami.Action {
text: "action 3"
}
}
Outra funcionalidade das acções do Kirigami é fornecer várias dicas aos itens que usam acções, sobre a forma como devem mostra a acção. Estas são tratadas principalmente pelas propriedades displayHint
e displayComponent
.
Estas propriedades serão respeitadas pelo item, se possível. Por exemplo, as seguintes acções serão apresentadas como um TextField com o item a tentar o seu melhor em manter o item visível o máximo de tempo possível.
import org.kde.kirigami 2.13 as Kirigami
Kirigami.Action {
text: "Search"
icon.name: "search"
displayComponent: TextField { }
displayHint: Kirigami.DisplayHints.KeepVisible
}
Usar as acções noutros componentes
Página
Uma das funcionalidades das páginas é que poderá adicionar as Acções a elas.
Poderá adicionar uma acção principal, uma acção à esquerda e à direita e acções de contexto adicionais que aparecem na barra de ferramentas, caso exista espaço suficiente, ou num menu em hambúrguer nos ecrãs mais pequenos.
import org.kde.kirigami 2.13 as Kirigami
Kirigami.Page {
title: i18n("Demo")
actions {
main: Kirigami.Action {
icon.name: "go-home"
onTriggered: showPassiveNotification(i18n("Main action triggered"))
}
left: Kirigami.Action {
icon.name: "go-previous"
onTriggered: showPassiveNotification(i18n("Left action triggered"))
}
right: Kirigami.Action {
icon.name: "go-next"
onTriggered: showPassiveNotification(i18n("Right action triggered"))
}
contextualActions: [
Kirigami.Action {
text: i18n("Contextual Action 1")
icon.name: "bookmarks"
onTriggered: showPassiveNotification(i18n("Contextual action 1 clicked"))
},
Kirigami.Action {
text: i18n("Contextual Action 2")
icon.name: "folder"
enabled: false
}
]
}
}

Acções da página no computador

Acções da página num dispositivo móvel
Aviso
To make the context actions work on mobile, you need to add a ContextDrawer to your Kirigami.ApplicationWindow .
Kirigami.ApplicationWindow {
...
contextDrawer: Kirigami.ContextDrawer {
id: contextDrawer
}
...
}
Área Global
A área global oferece uma navegação baseada em acções à sua aplicação. Este é o local em que as acções encadeadas são úteis, porque lhe permite criar uma navegação encadeada:
Kirigami.ApplicationWindow {
title: i18n("Demo")
globalDrawer: Kirigami.GlobalDrawer {
title: i18n("Demo")
titleIcon: "applications-graphics"
actions: [
Kirigami.Action {
text: i18n("View")
icon.name: "view-list-icons"
Kirigami.Action {
text: i18n("View Action 1")
onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
}
Kirigami.Action {
text: i18n("View Action 2")
onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
}
},
Kirigami.Action {
text: i18n("Action 1")
onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
},
Kirigami.Action {
text: i18n("Action 2")
onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
}
]
}
...
}

Acções das Áreas Globais no computador

Acções das Áreas Globais num dispositivo móvel
Poderá ler mais sobre as Áreas Globais na página de documentação das mesmas.
ActionTextFields
Um ActionTextField do Kirigami é usado para adicionar algumas acções de contexto a um campo de texto, como por exemplo limpar o texto ou procurar pelo mesmo.
Kirigami.ActionTextField {
id: searchField
rightActions: [
Kirigami.Action {
icon.name: "edit-clear"
visible: searchField.text !== ""
onTriggered: {
searchField.text = ""
searchField.accepted()
}
}
]
}
Neste exemplo, estamos a criar um botão de limpeza para um campo de pesquisa que só aparece quando tiver introduzido algum texto.
Nota
You should only rarely use an ActionTextField directly. The two major use cases for an ActionTextField are provided by SearchField and PasswordField . Both inherit from ActionTextField.SwipeListItem
Um SwipeListItem é um objecto-delegado que pretende dar suporte a acções extras. Ao usar um rato, as mesmas irão aparecer à passagem. Num dispositivo táctil, as mesmas poderão aparecer se arrastar o item com a pega.
ListView {
model: myModel
delegate: SwipeListItem {
QQC2.Label {
text: model.text
}
actions: [
Action {
icon.name: "document-decrypt"
onTriggered: print("Action 1 clicked")
},
Action {
icon.name: model.action2Icon
onTriggered: // fazer algo
}
]
}
}

O SwipeListItem num computador

O SwipeListItem num dispositivo móvel
ActionToolBar
Uma ActionToolBar é uma barra de ferramentas construída com base numa lista de acções. Por omissão, cada acção que caiba na barra de ferramentas será representada como um ToolButton, sendo que as que não caibam irão para um menu no fim da barra de ferramentas.
Como o ActionTextField, poderá não necessitar de usar o ActionToolBar directamente, dado que é usado pelos cabeçalhos das páginas e cartões para fornecer a sua apresentação das acções.
Kirigami.ActionToolBar {
actions: [
Kirigami.Action {
text: i18n("View Action 1")
onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
},
Kirigami.Action {
text: i18n("View Action 2")
onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
},
Kirigami.Action {
text: i18n("Action 1")
onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
},
Kirigami.Action {
text: i18n("Action 2")
onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
}
]
}
Poderá ler mais sobre os componentes ActionToolBar na sua página de documentação dedicada.
Cartões
Os componentes de cartões (Cards) também podem ser receber uma acção. Para mais informações, consulte a página do componente Cards.