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.

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 propietat icon.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 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
             }
        ]
    }
}

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.

Usar la Galeria del Kirigami

Colors i temes creats amb el Kirigami