Accions basades en els components
Accions
Una acció de Kirigami encapsula una acció de la interfície d'usuari. Podem utilitzar-les per a proporcionar a les nostres aplicacions accions de fàcil accés que són essencials per a la seva funcionalitat.
Nota
Kirigami actions inherit from Qt Quick Controls 2 Action and can be assigned shortcuts.Igual que QtQuick Controls Actions, es poden assignar a elements de menú i botons de la barra d'eines, però també a molts altres components de 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
La propietaticon.name pren els noms per a les icones de tot el sistema segons l'especificació de FreeDesktop. Aquestes icones i noms d'icones es poden veure amb l'aplicació CuttleFish del KDE o visitant l'especificació per a l'anomenat de les icones de FreeDesktop.Una característica que ofereixen les Kirigami Actions a més de les QtQuick Actions és la possibilitat de niar les accions.
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"
}
}
Una altra característica de les Kirigami Actions és proporcionar diversos consells als elements que empren accions sobre com mostraran l'acció. Aquests són principalment gestionats per les propietats displayHint i displayComponent.
Si és possible, aquestes propietats seran respectades per l'element. Per exemple, l'acció següent es mostrarà com un camp de text amb l'element fent tot el possible per mantenir visible l'element el temps més gran possible.
import org.kde.kirigami 2.13 as Kirigami
Kirigami.Action {
text: "Search"
icon.name: "search"
displayComponent: TextField { }
displayHint: Kirigami.DisplayHints.KeepVisible
}
Usar accions en altres components
Pàgina
Una de les característiques de les pàgines és que se'ls hi poden afegir accions.
Podeu afegir una acció principal, una acció cap a l'esquerra i cap a la dreta, així com accions contextuals addicionals que es mostrin a la barra d'eines si hi ha prou lloc o en un menú d'hamburguesa en les pantalles més petites.
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
}
]
}
}
Accions de la pàgina a l'escriptori
Accions de la pàgina en un dispositiu mòbil
Avís
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
}
...
}
Calaix global
El calaix global proporciona a la vostra aplicació una navegació basada en accions. Aquest és el lloc on les accions niades són útils perquè permeten crear navegació niada:
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"))
}
]
}
...
}
Accions dels calaixos globals a l'escriptori
Accions dels calaixos globals en un dispositiu mòbil
Podeu llegir més sobre els calaixos globals a la pàgina de documentació per als calaixos.
ActionTextField
S'utilitza un ActionTextField de Kirigami per a afegir algunes accions contextuals a un camp de text, per exemple, per a netejar el text o per a fer-ne la cerca.
Kirigami.ActionTextField {
id: searchField
rightActions: [
Kirigami.Action {
icon.name: "edit-clear"
visible: searchField.text !== ""
onTriggered: {
searchField.text = ""
searchField.accepted()
}
}
]
}
En aquest exemple, estem creant un botó de neteja per a un camp de cerca que només serà visible quan s'hi introdueix text.
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
Un SwipeListItem és un delegat destinat a admetre accions addicionals. Quan s'empra un ratolí, es mostrarà en passar el ratolí per sobre. Quan s'empra un dispositiu tàctil, es podrà mostrar arrossegant l'element amb la nansa.
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: // fa alguna cosa
}
]
}
}
SwipeListItem en un ordinador
SwipeListItem en un dispositiu mòbil
ActionToolBar
Una ActionToolBar és una barra d'eines construïda a partir d'una llista d'accions. De manera predeterminada, cada acció que càpiga a la barra d'eines estarà representada per un botó d'eina (ToolButton), i les que no càpiguen es mouran a un menú al final de la barra d'eines.
Igual que ActionTextField, és possible que no necessiteu utilitzar ActionToolBar directament, ja que l'utilitzen les capçaleres i les targetes de pàgina per a mostrar la seva acció.
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"))
}
]
}
Podeu llegir més sobre els components ActionToolBar a la seva pàgina de documentació dedicada.
Targetes (Card)
Els components de les targetes també poden realitzar una acció. Per a més informació, vegeu la pàgina de components per a les targetes.