Predali

Predali so plošče, ki zdrsnejo iz strani okna aplikacije. Napolnjene so lahko z interaktivnimi elementi, kot so Kirigami Actions, gumbi, besedilo in drugo.

Predali prihajajo v različnih vrstah, oblikah in formatih. Na tej strani bomo šli čez vsako vrsto in zagotovili pregled njihovih značilnosti.

Globalni predal

Globalni predal je standardna funkcija v KDE-jevih mobilnih aplikacijah in ga je včasih mogoče najti tudi v njihovih inkarnacijah na namizju. Vsebuje glavni meni aplikacije: vključene so vse funkcije, ki niso specifične za trenutno stran, vendar so še vedno pomembne za splošno krmarjenje ali interakcijo znotraj aplikacije.

Aktivirajte ga lahko tako, da tapnete v hamburger meniju ali s potegom z levega roba do sredine zaslona v načinu od leve na desno ali od desnega roba v načinu z desne v levo.

Za ustvarjanje takšnih predalov uporabljamo komponente Kirigami.GlobalDrawer. Te so nastavljene na lastnost globalDrawer komponente Kirigami.ApplicationWindow, ki tvori osnovo naše aplikacije Kirigami.

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

Glava

Glave headers se lahko uporabljajo za nameščanje lepljivih komponent na vrh vašega globalnega predala. Komponente glave ostanejo na mestu, tudi če vaš globalni predal vsebuje ugnezdena dejanja Kirigami, ki nadomeščajo trenutni sloj na globalnem predalu.

Izbrano komponento glave lahko nastavite z lastnostjo header globalnega predala in ta bo nadomestila naslov globalnega predala. To je uporabno za dodajanje Kirigami.SearchField, na primer:

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

Prilagajanje namizju

Medtem ko so globalni predali v obliki plošče lahko uporabni v mobilnih okoljih, so morda preveliki na namizju, zlasti če ima aplikacija malo dejanj.

Na srečo globalni predali Kirigami ponujajo lastnost isMenu. Ko je nastavljena na true, se na namizju spremenijo v bolj tradicionalne menije.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        // Kirigami Addons tukaj...
    ]
}

Kontekstni predali

Medtem ko globalni predal Kirigami.GlobalDrawer prikazuje globalne dejavnosti čez celotno vašo aplikacijo, naj bi bil kontekstni predal Kirigami.ContextDrawer uporabljen za prikaz dejavnosti, ki so relevantne samo v določenih kontekstih. To je ponavadi uporabljeno v ločenih straneh [pages]/docs/getting-started/kirigami/introduction-pages).

Kontekstni predal se bo obnašal različno, odvisno od tega, ali se uporablja na mobilni platformi ali na namiznem računalniku.

Na namizju, ko ima okno dovolj prostora, se kontekstualna dejanja prikažejo kot del skupine actions v zgornji orodni vrstici. Ko je prostora malo, na primer na mobilni napravi ali v ozkem oknu, so kontekstualna dejanja skrita za hamburger menijem na desni strani. To se razlikuje od drugih dejanj v skupini actions, in sicer actions.main, actions.left in actions.right; ta se v oknih z omejenim prostorom ne skrijejo, temveč se strnejo v ustrezne ikone.

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

Na mobilni napravi je predal vedno sestavljen iz dejanj, skritih za hamburger menijem. Aktivirate ga lahko tako, da se dotaknete hamburger menija ali povlečete od desnega roba do sredine zaslona v načinu od leve proti desni ali od levega roba v načinu od desne proti levi.

Modalni in znotrajvrstični predali

Kirigami ponuja dve dodatni vrsti predalov, modalne predale in znotrajvrstične predale. Vrsti sta si precej podobni: obe segata v celoto širine ali višine aplikacije in se lahko postavita na robove okna aplikacije. Vendar pa se različno odzivata na interakcijo uporabnikov.

• Modalni predali so privzeto skriti in zatemnijo preostanek aplikacije ter se opustijo, ko kliknete zatemnjeno območje.
• Znotrajvrstični predali so privzeto prikazani in uporabniku omogočajo interakcijo s preostalim delom aplikacije, ne da bi ga opustili, in ne zatemnijo drugih področij.

Ta vrsta predala je odprta in prilagodljiva, a na splošno boste morda želeli uporabiti to vrsto predala, ko želite, da se ob dolgem pritisku ali desnem kliku prikaže majhen seznam možnosti.

Ta dva predala sta si tako podobna, ker sta dejansko izvedena z isto komponento Kirigami: 'Kirigami.OverlayDrawer. Tu je nekaj pomembnih podedovanih lastnosti te komponente, ki jih je treba imeti v mislih:

• Popup.modal nadzira, ali bo predal modalen ali znotrajvrstični, odvisno od logične vrednosti.
• Drawer.edge nadzoruje, na katerem robu okna aplikacije se bo predal prikazal; možnosti za to lastnost so 'Qt.TopEdge', 'Qt.RightEdge', 'Qt.BottomEdge' in 'Qt.LeftEdge'.
• Popup.contentItem vsebuje komponento, ki bo tvorila vsebino predala.

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
            // Nastavite modal na false, da ta predal postane znotrajvrstični!
            modal: true

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