Agoj bazitaj komponantoj

La Agoj de Kirigami estas uzataj por aldoni funkciojn al komponantoj.

Agoj

Kirigami.Action enkapsuligas uzantinterfacon. Ni povas uzi ĉi tiujn por provizi niajn aplikojn per facile atingeblaj agoj, kiuj estas esencaj por ilia funkcieco.

Noto

Kirigami-agoj heredas de QtQuick Controls Action kaj povas esti asignitaj ŝparvojoj.

Kiel QtQuick Controls Actions , ili povas esti asignitaj al menueroj kaj ilobretobutonoj, sed ankaŭ al pluraj aliaj Kirigami-komponentoj.

import org.kde.kirigami 2.20 as Kirigami

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

Noto

La propreco icon.name prenas nomojn por tutsistemaj piktogramoj laŭ la FreeDesktop-specifo. Ĉi tiuj piktogramoj kaj piktogramnomoj povas esti viditaj per la aplikaĵo CuttleFish de KDE, kiu venas kun plasma-sdk, aŭ vizitante [la specifo pri piktogramoj de FreeDesktop](https: //specifications.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html).

Unu funkcio ofertita de Kirigami Agoj aldone al QtQuick Actions estas la ebleco nesti agojn.

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

Alia trajto de Kirigami Agoj estas provizi diversajn sugestojn al eroj uzante agojn pri kiel ili devus montri la agon. Ĉi tiuj estas ĉefe pritraktataj de la proprietoj displayHint kaj displayComponent .

Ĉi tiuj propraĵoj estos respektataj de la objekto se eble. Ekzemple, la sekva ago estos montrata kiel TextField kun la objekto klopodas por konservi sin videbla kiel eble plej longe.

import org.kde.kirigami 2.20 as Kirigami

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

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Uzante agojn en aliaj komponantoj

Paĝo

Unu el la funkcioj de Kirigami.Page estas ke Agoj povas esti aldonitaj al ĝi.

Vi povas aldoni agon actions.main, agon actions.left kaj actions.right kaj pliajn kuntekstagojn kiuj estas montrataj sur la ilobreto se ekzistas estas sufiĉa loko aŭ en hamburgera menuo sur pli malgrandaj ekranoj.

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

Averto

Por ke la kuntekstaj agoj funkciu ĉe poŝtelefono, vi devas aldoni ContextDrawer al via Kirigami.ApplicationWindow .

Kirigami.ApplicationWindow {
    ...
    contextDrawer: Kirigami.ContextDrawer {
        id: contextDrawer
    }
    ...
}

Ĉiea Kesto

La ĉiea tirkesto provizas navigadon bazitan en ago al via aplikaĵo. Jen kie nestitaj agoj estas utilaj ĉar eblas krei nestitan navigadon:

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

Vi povas legi pli pri Global Drawers en la dokumentada paĝo por kestoj.

AgoTextFields

Kirigami.ActionTextField estas uzata por aldoni kelkajn kontekstajn agojn al tekstkampo, ekzemple por purigi la tekston, aŭ serĉi la tekston.

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

En ĉi tiu ekzemplo, ni kreas butonon "klarigi" por serĉkampo kiu estas videbla nur kiam teksto estas enigita.

Noto

Vi malofte uzu ActionTextField rekte. SearchField kaj PasswordField ambaŭ heredas de ActionTextField kaj verŝajne kovros vian deziratan uzkazon.

SwipeListItem

Kirigami.SwipeListItem estas delegito intencita por subteni kromajn agojn. Kiam vi uzas muson, ĝiaj agoj ĉiam estos montritaj. Sur tuŝa aparato, ili povas esti montritaj trenante la objekton per la tenilo. En la sekvaj bildoj, ĉi tiuj estas la piktogramoj dekstre.

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: //fari ion
             }
        ]
    }
}

ActionToolBar

Kirigami.ActionToolBar estas ilobreto konstruita el listo de agoj. Defaŭlte, ĉiu ago kiu konvenos en la ilobreto estos reprezentita per ToolButton , kun tiuj kiuj ne taŭgas estos movitaj en menuon ĉe la fino de la ilobreto.

Same kiel ActionTextField , vi eble ne bezonos uzi ActionToolBar rekte ĉar ĝi estas uzata de paĝaj kaplinioj kaj kartoj por provizi ilian agomontron.

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

Horizontala ilobreto montriĝas ĉe la supro de la aplikaĵo

Vi povas legi pli pri ActionToolBar komponantoj en ilia dediĉita dokumentadopaĝo.

Kartoj

Kirigami.Karto estas uzata por montri kolekton de informoj aŭ agoj kune. Ĉi tiuj agoj povas esti aldonitaj al la grupo `agoj', simile al antaŭaj komponantoj.

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

Ekrankopio de plenrajta Karto kun standarda fono malantaŭ ĝia titolo, blanka fono malantaŭ ĝia teksto, kaj du agoj kun piktogramoj kaj hamburgera menuo malsupre

Por pliaj informoj konsultu la komponan paĝon por Kartoj.

Tipografio

Paĝaj vicoj kaj paĝaj stakoj