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.

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

Screenshot of a global drawer in desktop mode that looks like a sidebar

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.

Your chosen header component can be set with the global drawer's header property, and it will replace the global drawer's title. This is useful to add a Kirigami.SearchField, for example:

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

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

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

Adaptado por la labortablo

While panel-style global drawers can be useful in mobile environments, they might be too large on the desktop, especially when the application has few actions.

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 Actions here...
    ]
}
Ĉiea tirkesto en menureĝimo, sen kaplinio aŭ standardo

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

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"
            }
        ]
    }
}
Kunteksta tirkesto kun kontekstaj agoj kaŝitaj

Kunteksta tirkesto kun kontekstaj agoj kaŝitaj

Kunteksta tirkesto montranta ĉiujn kontekstajn agojn

Kunteksta tirkesto montranta ĉiujn kontekstajn agojn

On mobile, the drawer always consists of actions hidden behind a hamburger menu. It can be activated by tapping the hamburger menu or by swiping from the right edge to the middle of the screen in Left to Right mode or from the left edge in Right to Left mode.

Sama ekzemplo supre, funkciante en movebla reĝimo

Sama ekzemplo supre, funkciante en movebla reĝimo

Kunteksta tirkesto malfermita 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.

  • Modal drawers are hidden by default and darken the rest of the application, being dismissed when clicking on a darkened area.
  • Inline drawers are shown by default and allow the user to still interact with the rest of the application without being dismissed, and do not darken other areas.

This kind of drawer is open ended and flexible, but generally, you may want to use this kind of drawer when you want a small list of options to appear on a long press or right click.

Ĉ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 controls whether the drawer will be modal or inline depending on a boolean value.
  • Drawer.edge controls which edge of the application window the drawer will appear on; options for this property are part of the Edge enum , namely Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge, and Qt.LeftEdge.
  • Popup.contentItem contains the component that will form the content of your drawer.
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()
                }
            }
        }
    }
}
Modal drawer not visible

Modal drawer not visible

Modal drawer at the bottom edge of the screen

Modal drawer at the bottom edge of the screen