Kestoj

Kestoj provizas aplikojn kun rapida aliro al regiloj kaj paĝoj de via aplikaĵo.

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.

Kirigami.ApplicationWindow {

    globalDrawer: Kirigami.GlobalDrawer {
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "gtk-quit"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
    ...
}

Ekrankopio de ĉiea tirkesto en labortabla reĝimo kiu aspektas kiel flankbreto

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 propreco header de la ĉiea tirkesto.

globalDrawer: Kirigami.GlobalDrawer {

    header: Kirigami.AbstractApplicationHeader {

        contentItem: Kirigami.SearchField {
            id: searchField
            Layout.fillWidth: true
        }
    }

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

Nia ĉiea tirkesto nun montras la serĉtrinkkomponenton, kiun ni starigis kiel la kaplinion

Adaptado por la labortablo

Dum panel-stilaj ĉieaj tirkestoj povas esti utilaj en moveblaj medioj, ili eble estos tro grandaj sur la labortablo.

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

Noto

En ĉi tiu menua reĝimo, kaplinioj kaj standardoj ne estas videblaj.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

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

Ĉiea tirkesto en menureĝimo, sen kaplinio aŭ standardo

Standardoj

Standardoj permesas al vi montri titolon kaj piktogramon ĉe la supro de via ĉiea tirkesto (eĉ super la kaplinio).

Defaŭlte, standardoj estas videblaj nur en moveblaj medioj. Vi povas ŝanĝi ĉi tion agordante la proprecon bannerVisible de la ĉiea tirkesto al true.

Titoloj, fiksitaj kun la titolo propreco, povas esti uzataj por plibonigi vian ĉiean tirkeston kaj ŝajnigi ĝin malpli malabunda. Pli grave, ĝi povas memorigi viajn uzantojn, ke ĉi tio estas ĉiea kaj tutnivela tirkesto prefere ol loka tirkesto.

Ekzistas ankaŭ titleIcon propreco, kiu povas esti parigita kun via titolo por fari la ĉiean tirkeston eĉ pli estetike plaĉa. Ĉi tiu piktogramo estos metita maldekstre de la titolo.

globalDrawer: Kirigami.GlobalDrawer {
    title: "My Global Drawer"
    titleIcon: "kde"
    bannerVisible: true
    actions: [
        Kirigami.Action {
            text: "Kirigami Action 1"
        },
        Kirigami.Action {
            text: "Kirigami Action 2"
        },
        Kirigami.Action {
            text: i18n("Quit")
            icon.name: "application-exit"
            shortcut: StandardKey.Quit
            onTriggered: Qt.quit()
        }
    ]
}

Ĉiea tirkesto kun titolo kaj piktogramo en standardo

Noto

La propreco titleIcon prenas nomojn por tutsistemaj piktogramoj laŭ la specifo de FreeDesktop. Ĉ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).

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

Kirigami.ApplicationWindow {
    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 {
            main: Kirigami.Action {
                icon.name: "media-record"
            }
            left: Kirigami.Action {
                icon.name: "arrow-left"
            }
            right: Kirigami.Action {
                icon.name: "arrow-right"
            }
            contextualActions: [
                Kirigami.Action {
                    text: "Contextual Action 1"
                    icon.name: "media-playback-start"
                },
                Kirigami.Action {
                    text: "Contextual Action 2"
                    icon.name: "media-playback-stop"
                }
            ]
        }
    }
}

Kunteksta tirkesto kun kontekstaj agoj kaŝitaj

Kunteksta tirkesto montranta ĉiujn kontekstajn agojn

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. Se vi estas sur labortablo kaj volas testi la moveblan interfacon, vi povas ruli vian aplikaĵon per la mediovariablo QT_QUICK_CONTROLS_MOBILE=1.

Sama ekzemplo supre, funkciante en movebla reĝimo

Kunteksta tirkesto malfermita en movebla 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 mallumigas la reston de la aplikaĵo kaj, kiel supermezuritaj folioj , estos forigitaj kiam oni klakas sur mallumigita areo.
Enliniaj tirkestoj permesas al la uzanto ankoraŭ interagi kun la resto de la aplikaĵo sen esti forĵetita, kaj ne malheligas aliajn areojn.

Ĉ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 regas ĉu la tirkesto estos modala aŭ enlinia depende de bulea valoro
Drawer.edge regas sur kiu rando de la aplika fenestro aperos la tirkesto; opcioj por ĉi tiu propraĵo 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.Controls 2.15 as Controls

Kirigami.Page {

    Kirigami.OverlayDrawer {
        id: bottomDrawer
        edge: Qt.BottomEdge
        // Agordu modalon al falsa por enliniigi ĉi tiun tirkeston!
        modal: true

        contentItem: RowLayout {
            Layout.fillWidth: true

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

    Controls.Button {
        text: "Open bottomDrawer"
        onClicked: bottomDrawer.open()
    }
}

Modala tirkesto sur la malsupra rando de la ekrano

Enlinia tirkesto sur la malsupra rando de la ekrano

Uzkazo por malsupraj kovraj kestoj: NeoChat

NeoChat uzas malsuprajn tegaĵojn por provizi la uzanton per kelkaj agoj, kiujn ili povas plenumi sur mesaĝo, kiun ili longe premis. Jen simpligita ekzemplo de kiel tio aspektas:

Kirigami.Page {

    ListView {
        model: App.MessageModel
        delegate: MessageDelegate {
            onPressAndHold: bottomDrawer.open()
        }
    }

   Kirigami.OverlayDrawer {
       id: bottomDrawer
       height: popupContent.implicitHeight
       edge: Qt.BottomEdge
       padding: 0
       leftPadding: 0
       rightPadding: 0
       bottomPadding: 0
       topPadding: 0

       parent: applicationWindow().overlay

       ColumnLayout {
           id: popupContent
           width: parent.width
           spacing: 0
           
           // Mesaĝaj informoj
           ...
           
           // Mesaĝaj agoj
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}

Kartoj

Blatoj