Agoj bazitaj komponantoj

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

Agoj

Kirigami.Ago konsistas el klakebla ago, kies aspekto dependas de kie ĝi estas aldonita. Kutime ĝi estas butono kun piktogramo kaj teksto.

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 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 Actions aldone al QtQuick Actions estas la ebleco nesti agojn.

import org.kde.kirigami 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 as Kirigami

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

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Uzante agojn en aliaj komponantoj

Kiel menciite en la enkonduka lernilo por agoj, Kirigami-agoj estas kunteksta, kio signifas, ke ili aperas en malsamaj lokoj depende de kie vi metas ilin. Krom tio, ili ankaŭ havas malsamajn reprezentadojn por labortablo kaj poŝtelefono.

Paĝo

Kirigami.Paĝo montras Agojn dekstre de la supra kaplinio en labortabla reĝimo, kaj sur piedpiedo en movebla reĝimo.

 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
38
39
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Actions Demo"
    width: 600
    height: 600

    globalDrawer: Kirigami.GlobalDrawer {}
    contextDrawer: Kirigami.ContextDrawer {}

    pageStack.initialPage: Kirigami.Page {
        title: "Demo"

        actions: [
            Kirigami.Action {
                icon.name: "go-home"
                onTriggered: showPassiveNotification("Main action triggered")
            },
            Kirigami.Action {
                icon.name: "go-previous"
                onTriggered: showPassiveNotification("Left action triggered")
            },
            Kirigami.Action {
                icon.name: "go-next"
                onTriggered: showPassiveNotification("Right action triggered")
            },
            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
            }
        ]
    }
}

Ĉiea tirkesto

La Kirigami.GlobalDrawer estas menu-simila flanka kolumno kiu disponigas ag-bazitan navigadon al via aplikaĵo. Jen kie nestitaj agoj estas utilaj ĉar eblas krei nestitan navigadon:

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Actions Demo"
    globalDrawer: Kirigami.GlobalDrawer {
        title: "Demo"
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: "View"
                icon.name: "view-list-icons"
                Kirigami.Action {
                    text: "View Action 1"
                    onTriggered: showPassiveNotification("View Action 1 clicked")
                }
                Kirigami.Action {
                    text: "View Action 2"
                    onTriggered: showPassiveNotification("View Action 2 clicked")
                }
            },
            Kirigami.Action {
                text: "Action 1"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Action 2"
                onTriggered: showPassiveNotification("Action 2 clicked")
            }
        ]
    }
    //...
}

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

Kunteksta tirkesto

Kirigami.ContextDrawer konsistas el plia aro da agoj, kiuj estas kaŝitaj malantaŭ tri-punkta menuo supre dekstre en labortabla reĝimo aŭ malsupre dekstre en movebla reĝimo se mankas spaco. Ĝi estas uzata por montri agojn, kiuj rilatas nur al specifa paĝo. Vi povas legi pli pri ili en nia Kirigami Drawers lernilo.

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.

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Actions Demo"
    width: 350
    height: 350
    header: 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