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.

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.

 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 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 de ActionTextField 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
             }
        ]
    }
}

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"
    }
}

Captura de pantalla de una Card completa con un banner detrás del título, un fondo blanco detrás del texto y dos acciones con iconos y un menú hamburguesa en la parte inferior

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

Tipografía

Filas de páginas y pilas de páginas