Componentes basados en acciones

Las acciones de Kirigami se usan para añadir funcionalidad a los componentes.

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.

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: { ... }
}

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 .

These properties will be respected by the item if possible. For example, the following action will be displayed as a TextField with the item trying its best to keep itself visible as long as possible.

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.

You can add a actions.main action, a actions.left and actions.right action and additional context actions that are displayed on the toolbar if there is enough place or in a hamburger menu on smaller screens.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    globalDrawer: Kirigami.GlobalDrawer {}
    contextDrawer: Kirigami.ContextDrawer {}

    pageStack.initialPage: Kirigami.Page {
        title: "Demo"

        actions {
            main: Kirigami.Action {
                icon.name: "go-home"
                onTriggered: showPassiveNotification("Main action triggered")
            }
            left: Kirigami.Action {
                icon.name: "go-previous"
                onTriggered: showPassiveNotification("Left action triggered")
            }
            right: Kirigami.Action {
                icon.name: "go-next"
                onTriggered: showPassiveNotification("Right action triggered")
            }
            contextualActions: [
                Kirigami.Action {
                    text: "Contextual Action 1"
                    icon.name: "bookmarks"
                    onTriggered: showPassiveNotification("Contextual action 1 clicked")
                },
                Kirigami.Action {
                    text: "Contextual Action 2"
                    icon.name: "folder"
                    enabled: false
                }
            ]
        }
    }
}
Acciones de página en el escritorio

Acciones de página en el escritorio

Acciones de página en un dispositivo móvil

Acciones de página en un dispositivo móvil

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 el escritorio

Acciones del cajón global en un dispositivo móvil

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.

Campo de búsqueda con el texto: "Quiero

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 una computadora

SwipeListItem en un dispositivo móvil

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.

Like ActionTextField , you may not need to use ActionToolBar directly as it is used by page headers and cards to provide their action display.

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

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

A Kirigami.Card is used to display a collection of information or actions together. These actions can be added to the actions group, similarly to previous components.

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"
    }
}
Screenshot of a full-fledged Card with a banner background behind its title, white background behind its text, and two actions with icons and a hamburger menu at the bottom

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