Accions basades en els components

Les Kirigami Actions s’utilitzen per a afegir funcionalitat als 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.

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

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 a l’escriptori

Accions de la pàgina en un dispositiu mòbil

Accions de la pàgina en un dispositiu mòbil

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 a l’escriptori

Accions dels calaixos globals en un dispositiu mòbil

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.

Camp de cerca amb el text: “I want

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 ordinador

SwipeListItem en un dispositiu mòbil

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.