Komponente, ki temeljijo na dejanjih

Kirigamijeva dejanja se uporabljajo za dodajanje funkcionalnosti komponentam.

Dejanja

Kirigami.Action vsebuje dejanje uporabniškega vmesnika. Z njimi lahko našim aplikacijam zagotovimo enostavno dostopna dejanja, ki so bistvena za njihovo funkcionalnost.

Podobno se QtQuick Controls Actions lahko dodelijo elementom menija in gumbom orodne vrstice, pa tudi več drugim komponentam Kirigamija.

import org.kde.kirigami 2.20 as Kirigami

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

Ena od zmožnosti, ki jih ponujajo dejanja Kirigami povrhu QtQuick Actions , je možnost gnezdenja dejanj.

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

Druga zmožnost dejanj Kirigami je zagotavljanje različnih namigov elementom, ki uporabljajo dejanja, o tem, kako naj prikažejo dejanje. S temi v prvi vrsti ravnata lastnosti e displayHint in displayComponent .

Če je mogoče, bo ta element spoštoval te lastnosti. Na primer, naslednje dejanje bo prikazano kot Polje besedila TextField s postavko, ki se trudi, da bo postavka čim dlje vidna.

import org.kde.kirigami 2.20 as Kirigami

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

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Uporaba dejanj v drugih komponentah

Stran

Ena od zmožnosti strani Kirigami.Page je, da jim je mogoče dodati dejanja.

Dodate lahko glavno dejanje actions.main, levo actions.left in desno dejanje actions.right ter dodatna kontekstna dejanja context actions , ki so prikazana v orodni vrstici, če je zaslonih dovolj prostora, ali v meniju hamburgerja na manjših zaslonih.

 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
                }
            ]
        }
    }
}
Dejanja strani na namizju

Dejanja strani na namizju

Dejanja strani na mobilni napravi

Dejanja strani na mobilni napravi

Globalni predal

Globalni predal (angl. global drawer) omogoča krmarjenje na podlagi dejanj v vaši aplikaciji. To je kraj, kjer so ugnezdena dejanja uporabna, ker omogočajo ustvarjanje ugnezdene navigacije:

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"))
            }
        ]
    }
    ...
}
Dejanja globalnih predalov na namizju

Dejanja globalnih predalov na namizju

Dejanja globalnih predalov na mobilni napravi

Dejanja globalnih predalov na mobilni napravi

Več o globalnih predalih si lahko preberete na strani dokumentacije documentation page for drawers.

ActionTextFields

Kirigami.ActionTextField se uporablja za dodajanje nekaterih kontekstualnih dejanj v besedilno polje, npr. za počiščenje besedila ali iskanje besedila.

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

V tem primeru ustvarjamo čistilni gumb "clear" za iskalno polje, ki je vidno le ob vnosu besedila.

Iskalno polje z besedilom: "Želim

SwipeListItem

Kirigami.SwipeListItem je delegat, namenjen podpori dodatnih dejanj. Pri uporabi miške bodo prikazane ob miškini kazalki nad elementom. V napravi na dotik se lahko prikažejo tako, da povlečete element z ročico. V naslednjih slikah so to ikone na desni strani.

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: //narediti nekaj
             }
        ]
    }
}
SwipeListItem na računalniku

SwipeListItem na računalniku

SwipeListItem na mobilni napravi

SwipeListItem na mobilni napravi

ActionToolBar

Kirigami.ActionToolBar je orodna vrstica, zgrajena iz seznama dejanj. Vsako dejanje, ki bo privzeto ustrezalo orodni vrstici, bo predstavljeno z orodnim gumbom ToolButton , s tistimi, ki se ne ujemajo, pa so premaknjeni v meni na koncu orodne vrstice.

Tako kot ActionTextField morda ne boste potrebovali neposredne uporabe vrstice ActionToolBar , saj jo uporabljajo glave strani in kartice za zagotavljanje njihovega zaslona dejavnosti.

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"))
        }
    ]
}
Na vrhu aplikacije se prikaže vodoravna orodna vrstica

Na vrhu aplikacije se prikaže vodoravna orodna vrstica

Več o komponentah ActionToolBar si lahko preberete na njihovi strani z dokumentacijo dedicated documentation page.

Kartice

Kirigami.Card se skupaj uporablja za prikaz zbirke informacij ali dejanj. Ta dejanja je mogoče dodati v skupino `actions", podobno kot v prejšnje komponente.

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"
    }
}
Posnetek zaslona polno opremljene kartice z ozadjem pasice za naslovom, belim ozadjem za besedilom in dvema dejanjema z ikonami in hamburger menijem na dnu

Če želite več informacij, poglejte stran component page for Cards.