Componentes basados en acciones
Acciones
Una Kirigami.Action encapsula una acción de la interfaz de usuario. Podemos usarlas para proporcionar a nuestras aplicaciones acciones de fácil acceso que son esenciales para su funcionalidad.
Nota
Las acciones de Kirigami heredan de la acción de los controles de QtQuick y se le pueden asignar atajos de teclado.Al igual que las acciones de los controles de QtQuick , se pueden asignar a elementos del menú y a botones de la barra de herramientas, así como a otros componentes de Kirigami.
import org.kde.kirigami 2.20 as Kirigami
Kirigami.Action {
id: copyAction
text: i18n("&Copy")
icon.name: "edit-copy"
shortcut: StandardKey.Copy
onTriggered: { ... }
}
Nota
La propiedad icon.name usa nombres de iconos del sistema siguiendo la especificación de FreeDesktop. Estos iconos y nombres de iconos se pueden ver con la aplicación CuttleFish de KDE, incluida en plasma-sdk, o visitando la especificación de nombres de iconos de FreeDesktop.Una funcionalidad que ofrecen las acciones de Kirigami sobre las acciones de QtQuick es la posibilidad de anidad acciones.
import org.kde.kirigami 2.20 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"
}
}
Otra de las funcionalidades de las acciones de Kirigami es la de proporcionar diversas sugerencias a los elementos que usan acciones sobre cómo deben mostrar la acción. Esto se controla principalmente mediante las propiedades ` displayHint y displayComponent .
Estas propiedades serán respetadas por el elemento siempre que sea posible. Por ejemplo, la siguiente acción se mostrará como un TextField con el elemento haciendo todo lo posible para mantenerse visible el mayor tiempo posible.
import org.kde.kirigami 2.20 as Kirigami
Kirigami.Action {
text: "Search"
icon.name: "search"
displayComponent: TextField { }
displayHint: Kirigami.DisplayHints.KeepVisible
}
Uso de acciones en otros componentes
Página
Una característica de Kirigami.Page es que se le pueden añadir acciones.
Puede añadir una acción actions.main
, una acción actions.left
y actions.right
, así como acciones de contexto adicionales que se muestran en la barra de herramientas, si existe suficiente espacio, o en un menú de hamburguesa en pantallas más pequeñas.
|
|

Acciones de página en el escritorio

Acciones de página en un dispositivo móvil
Advertencia
Para que las acciones de contexto funcionen en el móvil, debe añadir un ContextDrawer a su Kirigami.ApplicationWindow .
Kirigami.ApplicationWindow {
...
contextDrawer: Kirigami.ContextDrawer {
id: contextDrawer
}
...
}
Cajón global
El cajón global proporciona navegación basada en acciones a su aplicación. Aquí es donde las acciones anidadas resultan útiles, ya que es posible crear navegación anidada:
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"))
}
]
}
...
}

Acciones del cajón global en el escritorio

Acciones del cajón global en un dispositivo móvil
Puede obtener más información sobre los cajones globales en la página de documentación de los cajones.
ActionTextFields
Una Kirigami.ActionTextField se usa para añadir algunas acciones de contexto a un campo de teto. Por ejemplo, para borrar el texto o para buscar dicho texto.
Kirigami.ActionTextField {
id: searchField
rightActions: [
Kirigami.Action {
icon.name: "edit-clear"
visible: searchField.text !== ""
onTriggered: {
searchField.text = ""
searchField.accepted()
}
}
]
}
En este ejemplo, vamos a crear un botón de borrado para un campo de búsqueda, que solo será visible tras introducir texto.
Nota
Raramente debería usar un ActionTextField directamente. Tanto SearchField como PasswordField heredan deActionTextField
y es probable que cubran sus necesidades.SwipeListItem
A Kirigami.SwipeListItem is a delegate intended to support extra actions. When using a mouse, its actions will always be shown. On a touch device, they can be shown by dragging the item with the handle. In the following pictures, these are the icons to the right.
ListView {
model: myModel
delegate: SwipeListItem {
Controls.Label {
text: model.text
}
actions: [
Action {
icon.name: "document-decrypt"
onTriggered: print("Action 1 clicked")
},
Action {
icon.name: model.action2Icon
onTriggered: //hacer algo
}
]
}
}

SwipeListItem en una computadora

SwipeListItem en un dispositivo móvil
ActionToolBar
A Kirigami.ActionToolBar is a toolbar built out of a list of actions. By default, each action that will fit in the toolbar will be represented by a ToolButton , with those that do not fit being moved into a menu at the end of the toolbar.
Como ActionTextField , no necesita usar ActionToolBar directamente, ya que la usan las cabeceras de las páginas y de las tarjetas para mostrar sus acciones.
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"))
}
]
}

Una barra de herramientas horizontal que se muestra en la parte superior de la aplicación
Puede leer más sobre los componentes ActionToolBar en su propia página de documentación.
Tarjetas
Una
Kirigami.Card
se usa para mostrar una colección de información o acciones juntas. Dichas acciones se pueden añadir al grupo actions
, del mismo modo que los componentes anteriores.
Kirigami.Card {
actions: [
Kirigami.Action {
text: qsTr("Action1")
icon.name: "add-placemark"
},
Kirigami.Action {
text: qsTr("Action2")
icon.name: "address-book-new-symbolic"
},
// ...
]
banner {
source: "../banner.jpg"
title: "Title Alignment"
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}

Para más información, consulte la página del componente de tarjetas.