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.

Opomba

Kirigami dejanja dedujejo od QtQuick Controls Action in jim lahko dodelimo bližnjice.

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

Opomba

Lastnost icon.name pobere imena za sistemske ikone, skladno s specifikacijo FreeDesktop. Te ikone in imena ikon si lahko ogledate s KDE-jevo aplikacijo CuttleFish, ki pride z plasma-sdk, ali z obiskom strani FreeDesktop's icon naming specification.

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

Opozorilo

Da kontekstna dejanja delujejo tudi na mobilnih telefonih, morate dodati predal ContextDrawer v vaše okno 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 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.

Opomba

Le poredko bi uporabili neposredno ActionTextField. Oba SearchField in PasswordField dedujeta iz ActionTextField in verjetno pokrivata vašo zaželeno rabo.

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

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

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.

Tipografija

Vrstice strani in skladi strani