Kestoj

Kestoj estas paneloj, kiuj glitas el la flankoj de la aplika fenestro. Ili povas esti plenigitaj per interagaj elementoj kiel Kirigami-Agoj, butonoj, teksto kaj pli.

Kestoj venas en malsamaj specoj, formoj kaj formoj. En ĉi tiu paĝo ni trarigardos ĉiun tipon kaj provizos superrigardon de iliaj karakterizaĵoj.

Ĉiea tirkesto

La ĉiea tirkesto estas norma funkcio en la poŝtelefonaj aplikoj de KDE kaj foje troviĝas ankaŭ en iliaj labortablaj enkarniĝoj. Ĝi enhavas la ĉefan menuon de aplikaĵo: inkluditaj ĉi tie estas iuj funkcioj, kiuj ne estas specifaj por la nuna paĝo sed ankoraŭ signifaj por ĝenerala navigado aŭ interagado ene de la aplikaĵo.

Ĝi povas esti aktivigita frapante la hamburgeran menuon aŭ svingante de la maldekstra rando al la mezo de la ekrano en Maldekstre al Dekstra reĝimo aŭ de la dekstra rando en Dekstre al Maldekstra reĝimo.

Kirigami.GlobalDrawer komponantoj estas tio, kion ni uzas por krei tiajn kestojn. Ĉi tiuj estas agordita al la proprieto globalDrawer de la Kirigami.ApplicationWindow kiu formas la bazon de nia Kirigami-aplikaĵo.

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer"
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

Kapo

Titoloj povas esti uzataj por meti gluiĝemajn komponantojn ĉe la supro de via ĉiea kesto. Kapaj komponantoj restos en la loko eĉ se via ĉiea tirkesto enhavas nestitajn Kirigami-agojn, kiuj anstataŭigas la nunan tavolon sur la ĉiea kesto.

Via elektita kaplinia komponanto povas esti agordita per la header' de la ĉiea tirkesto, kaj ĝi anstataŭigos la titolon de la ĉiea tirkesto. Ĉi tio estas utila por aldoni Kirigami.SearchField`, ekzemple:

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer with searchfield (not visible)"

        header: Kirigami.SearchField {
                id: searchField
        }

        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

Adaptado por la labortablo

Dum panel-stilaj ĉiea tirkestoj povas esti utilaj en moveblaj medioj, ili eble estos tro grandaj sur la labortablo, precipe kiam la aplikaĵo havas malmultajn agojn.

Feliĉe, Kirigami ĉieaj tirkestoj disponigas isMenu proprecon. Kiam ili agordas al "veraj", ili iĝas pli tradiciaj menuoj nur sur la labortablo.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        // Kirigami-Agoj ĉi tie...
    ]
}

Kuntekstaj Kestoj

Dum Kirigami.GlobalDrawer montras ĉieajn agojn disponeblajn tra via aplikaĵo, Kirigami.ContextDrawer devus esti uzata por montri agojn kiuj estas nur gravaj en certaj kuntekstoj. Ĉi tio estas kutime uzata en apartaj paĝoj.

Kunteksta tirkesto aperos nur se iuj [kuntekstaj Agoj](docs:kirigami2;Paĝo::kuntextualaj Agoj) estis kreitaj kiel parto de la Paĝo.agoj-grupo. Ĝi ankaŭ kondutas alimaniere laŭ ĉu ĝi estas uzata sur movebla platformo aŭ sur labortablo.

Sur labortablo, kiam fenestro havas sufiĉe da spaco, kuntekstaj agoj aperas kiel parto de la grupo "agoj" en la supra ilobreto. Kiam spaco estas limigita, kiel ĉe poŝtelefono aŭ en mallarĝa fenestro, kontekstaj agoj estas kaŝitaj malantaŭ hamburgera menuo dekstre. Tio diferencas de aliaj agoj en la grupo actions, nome actions.main, actions.left kaj actions.right; tiuj ne estas kaŝitaj en spac-limigitaj fenestroj, kaj estas anstataŭe kolapsitaj en siajn respektivajn piktogramojn.

 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
40
41
42
43

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    height: 600
    width: 1200
    minimumWidth: 500

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

    pageStack.initialPage: [ emptyPage, contextDrawerPage ]

    Kirigami.Page {
        title: "Empty page"
        id: emptyPage
    }

    Kirigami.Page {
        id: contextDrawerPage
        title: "Context Drawer page"

        actions: [
            Kirigami.Action {
                icon.name: "media-record"
            },
            Kirigami.Action {
                icon.name: "arrow-left"
            },
            Kirigami.Action {
                icon.name: "arrow-right"
            },
            Kirigami.Action {
                text: "Contextual Action 1"
                icon.name: "media-playback-start"
            },
            Kirigami.Action {
                text: "Contextual Action 2"
                icon.name: "media-playback-stop"
            }
        ]
    }
}

Sur poŝtelefono, la tirkesto ĉiam konsistas el agoj kaŝitaj malantaŭ hamburgera menuo. Ĝi povas esti aktivigita frapante la hamburgeran menuon aŭ svingante de la dekstra rando al la mezo de la ekrano en Maldekstre al Dekstra reĝimo aŭ de la maldekstra rando en Dekstre al Maldekstra reĝimo.

Modalaj kaj Enliniaj tirkestoj

Kirigami ofertas du pliajn specojn de kestoj, modalaj kestoj kaj enliniaj kestoj. Ili estas sufiĉe similaj unu al la alia: ambaŭ ampleksas la tuton de la larĝo aŭ alteco de la aplikaĵo kaj povas esti metitaj sur la randojn de la aplika fenestro. Tamen, ili ja reagas alimaniere al uzantinterago.

• Modalaj tirkestoj estas kaŝitaj defaŭlte kaj mallumigas la reston de la aplikaĵo, estante forĵetitaj kiam oni klakas sur mallumigita areo.
• Enliniaj tirkestoj estas montritaj defaŭlte kaj permesas al la uzanto ankoraŭ interagi kun la resto de la aplikaĵo sen esti forĵetitaj, kaj ne malheligas aliajn areojn.

Ĉi tiu speco de tirkesto estas malfermita kaj fleksebla, sed ĝenerale, vi eble volas uzi ĉi tiun tian tirkeston kiam vi volas ke malgranda listo de opcioj aperu per longa premo aŭ dekstra klako.

Ĉi tiuj du tirkestoj estas tiel similaj ĉar ili povas, fakte, esti efektivigitaj uzante la saman Kirigami-komponenton: Kirigami.OverlayDrawer. Jen kelkaj gravaj hereditaj propraĵoj de ĉi tiu ero por memori:

• Popup.modal mastrumas ĉu la tirkesto estos modala aŭ enlinia depende de bulea valoro.
• Drawer.edge mastrumas sur kiu rando de la aplika fenestro aperos la tirkesto; elektebloj por ĉi tiu propreco estas parto de la Edge enum, nome Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge, kaj Qt.LeftEdge.
• Popup.contentItem enhavas la komponanton, kiu formos la enhavon de via tirkesto.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 400
    height: 600
    pageStack.initialPage: Kirigami.Page {
        title: "OverlayDrawer at the bottom"
        actions: [
            Kirigami.Action {
                text: "Open bottomDrawer"
                onTriggered: bottomDrawer.open()
            }
        ]
        Kirigami.OverlayDrawer {
            id: bottomDrawer
            edge: Qt.BottomEdge
            // Agordu modalon al falsa por enliniigi ĉi tiun tirkeston!
            modal: true

            contentItem: RowLayout {
                Controls.Label {
                    Layout.fillWidth: true
                    text: "Say hello to my little drawer!"
                }
                Controls.Button {
                    text: "Close"
                    onClicked: bottomDrawer.close()
                }
            }
        }
    }
}