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.

Opomba

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

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

Opomba

Lastnost »icon.name« hrani imena za sistemske ikone, skladno s specifikacijo FreeDesktop. Te ikone in imena ikon si lahko ogledate s KDE-jevo aplikacijo CuttleFish ali z obiskom starni FreeDesktop's icon naming specification (v angl.).

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

Opozorilo

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

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

Opomba

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

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

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/).

Barve in teme v Kirigamiju

Tipografija