Komponente, ki temeljijo na dejanjih

Kirigamijeva dejanje se uporabljajo za dodajanje funkcionalnosti komponentam.

Dejanja

Dejanje Kirigami (»action«) vsebuje dejanje uporabniškega vmesnika. Z njimi lahko našim aplikacijam zagotovimo enostavno dostopna dejanja, ki so bistvena za njihovo funkcionalnost.

Tako kot dejanja kontrolnikov QtQuick se lahko dodelijo elementom menija in gumbom orodne vrstice, pa tudi več drugim komponentam Kirigamija.

import org.kde.kirigami 2.13 as Kirigami

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

Ena od funkcij, ki jih ponujajo dejanja Kirigami poleg dejanj QtQuick, je možnost gnezditi dejanja.

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

Druga funkcionalnost 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 »displayHint« in »displayComponent«.

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

import org.kde.kirigami 2.13 as Kirigami

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

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Uporaba dejanj v drugih komponentah

Stran

Ena od funkcionalnosti strani je, da jim je mogoče dodati dejanja.

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

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
            }
        ]
    }
}
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 dokumentacija za predale.

ActionTextField

Kirigamijev 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 prazen gumb za iskalno polje, ki je vidno le ob vnosu besedila.

Iskalno polje z besedilom: »Želim

SwipeListItem

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.

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

SwipeListItem na računalniku

SwipeListItem na mobilni napravi

SwipeListItem na mobilni napravi

ActionToolBar

ActionToolBar je orodna vrstica, zgrajena iz seznama dejanj. Vsako dejanje, ki bo privzeto ustrezalo orodni vrstici, bo predstavljeno z orodnim gumbom, 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"))
        }
    ]
}

Več o komponentah »ActionToolBar« si lahko preberete na njihovi [strani z dokumentacijo](.. /components-actiontoolbar/).

Kartice

Tudi komponente kartic »card« lahko ukrepajo. Če želite več informacij, se posvetujte s stranjo [komponente kartic](.. /components-card/).