Op acties gebaseerde componenten

Acties van Kirigami worden gebruikt om functionaliteit aan componenten toe te voegen.

Acties

Een actie in Kirigami omvat geheel een actie in de gebruikersinterface. We kunnen deze gebruiken om onze toepassingen te voorzien van gemakkelijk te bereiken acties die essentieel zijn voor hun functionaliteit.

Notitie

Kirigami actions inherit from Qt Quick Controls 2 Action and can be assigned shortcuts.

Net als QtQuick acties bestuurt, kunnen ze toegekend worden aan menu-items en werkbalkknoppen, maar ook aan meerdere andere Kirigami-componenten.

import org.kde.kirigami 2.13 as Kirigami

Kirigami.Action {
    id: copyAction
    text: i18n("&Copy")
    icon.name: "edit-copy"
    shortcut: StandardKey.Copy
    onTriggered: { ... }
}

Notitie

De eigenschap icon.name neemt namen voor systeembrede pictogrammen zoals de FreeDesktop-specificatie. Deze pictogrammen en pictogramnamen kunnen bekeken worden met de toepassing CuttleFish van KDE of door Specificatie van pictogrambenaming van FreeDesktop.

Een functie geboden door acties van Kirigami bovenop acties van QtQuick is de mogelijkheid acties te nesten.

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

Een andere functie van acties van Kirigami is het leveren van verschillende tips aan items net acties over hoe ze de actie zouden moeten tonen. Deze worden primair behandeld door de eigenschappen displayHint en displayComponent.

Deze eigenschappen zullen gerespecteerd worden door het item indien mogelijk. Bijvoorbeeld, de volgende actie zal getoond worden als een TextField met het item dat zijn best doet om het item zo lang als mogelijk zichtbaar te houden.

import org.kde.kirigami 2.13 as Kirigami

Kirigami.Action {
    text: "Search"
    icon.name: "search"

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Acties in andere componenten gebruiken

Pagina

Een van de functies van pagina's is dat acties er aan toegevoegd kunnen worden.

U kunt een hoofdactie toevoegen, een links en rechts actie en extra contextacties die getoond worden in de werkbalk als er genoeg plaats is of in een hamburgermenu op kleinere schermen.

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

Waarschuwing

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

Globale schuiflade

De globale schuiflade levert een actie gebaseerd op navigatie naar uw toepassing. Dit is de plaats waar geneste acties nuttig zijn omdat het u geneste navigatie laat maken:

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"))
            }
        ]
    }
    ...
}

Globale schuifladenacties op het bureaublad

Globale schuifladenacties op een mobiel apparaat

U kunt meer lezen over globale schuifladen in de documentatiepagina voor opvangbakken.

ActionTextFields

Een Kirigami ActionTextField wordt gebruikt om enige contextuele acties aan een tekstveld toe te voegen, bijvoorbeeld om de tekst te wissen of naar tekst te zoeken.

Kirigami.ActionTextField {
    id: searchField
    rightActions: [
        Kirigami.Action {
            icon.name: "edit-clear"
            visible: searchField.text !== ""
            onTriggered: {
                searchField.text = ""
                searchField.accepted()
            }
        }
    ]
}

In dit voorbeeld zijn we een wisknop aan het maken voor een zoekveld dat alleen zichtbaar is wanneer tekst wordt ingevoerd.

Notitie

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

Een SwipeListItem is een gedelegeerde bedoeld om extra acties te ondersteunen. Bij gebruik van een muis, zullen ze getoond worden bij er boven zweven. Op een aanraakscherm kunnen ze getoond worden door het item met de hendel te verslepen.

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: // iets doen
             }
        ]
    }
}

ActionToolBar

Een ActionToolBar is een werkbalk opgebouwd uit een lijst met acties. Standaard zal elke actie die past op de werkbalk gerepresenteerd worden door een ToolButton, met zij die niet passen op de werkbalk verplaatst naar een menu aan het eind van de werkbalk.

Net als ActionTextField hoeft u ActionToolBar niet noodzakelijk direct, zoals het wordt gebruikt door paginakoppen en kaarten, te gebruiken om hun actiescherm te leveren.

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

U kunt meer over ActionToolBar componenten lezen in hun daaraan gewijde documentatiepagina.

Kaarten

De kaartcomponenten kunnen ook een actie nemen. Voor meer informatie raadpleeg de componentpagina voor kaarten.

Kleuren en thema's in Kirigami

Paginarijen en paginastapels