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.

Komponente 'Kirigami.GlobalDrawer' so tisto, kar uporabljamo za ustvarjanje takšnih predalov. Ti so določeni v lastnosti globalDrawer okna 'Kirigami.ApplicationWindow', ki tvorijo osnove naše aplikacije Kirigami.

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

	...

}

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 vgnezdnena dejanja Kirigami, ki nadomeščajo trenutni sloj na globalnem predalu.

Vašo izbrano komponento glave lahko nastavite z lastnostjo 'header' globalnega predala.

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

Naš globalni predal zdaj prikazuje komponento vrstice za iskanje, ki smo jo nastavili kot glavo.

Prilagajanje namizju

Medtem ko so globalni predali v slogu plošče lahko uporabni v mobilnih okoljih, so morda preveliki na namizju.

K sreči Kirigami globalni predali zagotavljajo lastnost "isMenu". Ko je nastavljeno na 'true', se naši globalni predali spremenijo v bolj tradicionalne menije samo na namizju.

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

Pasice

Pasice omogočajo prikaz naslova in ikone na vrhu globalnega predala (tudi nad glavo).

Naslovi, nastavljeni z lastnostjo 'title' se lahko uporabljajo za polepšanje vašega globalnega predala in da manj razpršen videz. Še pomembneje je, da lahko vaše uporabnike opomni, da je to globalni predal in predal celotne aplikacije in ne le lokalni predal.

Obstaja tudi lastnost 'titleIcon', ki jo lahko združite z naslovom, da bo globalni predal še bolj estetsko prijeten. Ta ikona bo na levi strani naslova.

globalDrawer: Kirigami.GlobalDrawer {
	title: "My Global Drawer"
	titleIcon: "kde"

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

Privzeto so pasice vidne le v mobilnih okoljih. To lahko spremenite tako, da nastavite lastnost 'bannerVisible' komponente globalnega predala na 'true'.

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 potemnijo preostanek aplikacije in, bodo tako kot preklopne liste zavrženi ob kliku na potemnjeno območje.
• Znotrajvrstični predali omogočajo uporabniku, da še vedno interakcijo z ostalo aplikacijo, ne da bi bil odpuščen, in ne potemnijo drugih področij.

Ta dva predala sta si tako podobna, ker sta dejansko ista komponenta Kirigami: 'Kirigami.OverlayDrawer'. Pomembne lastnosti te komponente, ki jih je treba imeti v mislih:

• 'modal' nadzoruje, ali bo predal modalen ali znotrajvrstični, odvisno od boolove vrednosti
• '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'
• 'contentItem' vsebuje komponento, ki bo tvorila vsebino predala

import QtQuick.Controls 2.15 as QQC2

Kirigami.Page {

	Kirigami.OverlayDrawer {
		id: bottomDrawer
		edge: Qt.BottomEdge
		// Nastavite modal na false, da ta predal postane znotrajvrstični!
		modal: true

		contentItem: RowLayout {
			Layout.fillWidth: true

			QQC2.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()
	}

}

 <figure class="text-center"><img src="modal_drawer.png"
     alt="Modalni predal na spodnjem robu zaslona."/><figcaption>
        <p>Modalni predal na spodnjem robu zaslona.</p>
    </figcaption>

Primer uporabe prekrivnih spodnjih predalov: NeoChat

NeoChat uporablja prekrivne spodnje predale, da uporabniku zagotovi več dejanj, ki jih lahko izvede na sporočilu, ki ga je že dolgo pritiskal. Tukaj je poenostavljen primer, kako je to videti:

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
           
           // Podatki o sporočilu
           ...
           
           // Dejanja sporočil
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}