Panele

Półki dają aplikacjom szybki dostęp do rzeczy sterujących i stron twojej aplikacji.

Półki to panele, które wysuwają się z boków okna aplikacji. Można je wypełnić rzeczami interaktywnymi takimi jak Działania Kirigami, przyciskami, tekstem i wieloma innymi.

Półki występują w różnych rodzajach, kształtach i postaciach. Na tej stronie przerobimy każdy rodzaj i przedstawimy ich cechy szczególne.

Globalna półka

Globalna półka jest standardową cechą w aplikacjach przenośnych KDE, a czasami można ją znaleźć także na aplikacjach biurkowych. Zawiera główne menu aplikacji: znajdują się tutaj wpisy, które nie są szczególne dla danej strony lecz znaczące do ogólnego poruszania i oddziaływania na aplikację.

Składniki Kirigami.GlobalDrawer są tymi, których używamy do tworzenia takich półek. Są one ustawione na właściwość globalDrawer składnika Kirigami.ApplicationWindow, która tworzy podstawę naszej aplikacji 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()
			}
		]
	}

	...

}
Nasza nowa globalna półka

Nagłówek

Nagłówków można używać do umieszczania lepkich składników na górze naszej globalnej półki. Składki nagłówków pozostaną na swoim miejscu nawet gdy globalna półka będzie zawierać zagnieżdżone działania, które będą zastępować bieżącą warstwę w globalnej półce.

Twój wybrany składnik nagłówka można ustawić z właściwością globalnej półki header.

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

Nagłówek paska wyszukiwania globalnej półki

Nasza globalna półka pokazuje teraz składnik paska wyszukiwania, który ustawiliśmy jako nagłówek.

Dostosowywanie na urządzenia biurkowe

Podczas gdy globalne półki w postaci paneli mogą być użyteczna w środowiskach przenośnych, to mogą być zbyt duże w środowiskach urządzeń biurkowych.

Na szczęście, globalne półki Kirigami posiadają właściwość isMenu. Gdy ustawi się ją na true, to nasze globalne półki zamieniają się w bardziej tradycyjne menu takie, jakie można zobaczyć na urządzeniach biurkowych.

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()
		}
	]
}
Globalna półka jako menu na pulpicie

Strony oddzielające

Bannery umożliwiają wyświetlanie tytułu oraz ikony na górze globalnej półki (nawet powyżej nagłówka).

Tytuły, ustawione właściwością title, mogą być użyte do upiększenia twojej globalnej półki i sprawić, że będzie ona wyglądać mniej rozrzedzona. Najważniejsze jednak to to, że będzie przypominać twoim użytkownikom, że jest to globalna, a nie lokalna półka.

Istnieje także właściwość titleIcon, którą można sparować z twoim tytułem, aby uczynić globalną półkę jeszcze bardziej estetyczną. Ikona ta zostanie umieszczona po lewej stronie tytułu.

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()
		}
	]
}
Globalna półka z tytułem i ikoną na banerze

Jednakże, domyślnie, banery są widoczne tylko na urządzeniach przenośnych. Możesz to zmienić ustawiając właściwość składnika globalnej półki bannerVisible na true.

Półki modalne i w wierszu

Kirigami daje dwa dodatkowe rodzaje półek, półki modalne oraz w wierszu. Są do siebie całkiem podobne: oba mogą rozciągnąć się całkowicie na szerokość lub wysokość aplikacji oraz można je umieszczać na krawędziach okna aplikacji. Jednakże, odpowiadają inaczej na działania użytkownika.

  • Modalne półki przyciemniają resztę aplikacji oraz, tak jak arkusze nakładkowe, zostaną odwołane po naciśnięciu na przyciemnionym obszarze.
  • Półki w wierszu nadal umożliwiają użytkownikowi oddziaływać na resztę aplikacji bez ich odwołania i nie przyciemniają innych obszarów.

Te dwie półki są takie podobne do siebie, bo są one tymi samymi składnikami Kirigami: Kirigami.OverlayDrawer. Ważnymi właściwościami tego składnika, o których warto pamiętać, to:

  • modal określa, czy półka będzie modalna lub w wierszu, w zależności od wartości logicznej
  • edge określa na jakiej krawędzi okna aplikacji pojawi się półka; możliwe wartości dla tej właściwości to Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge oraz Qt.LeftEdge
  • contentItem zawiera składnik, który będzie stanowił treść naszej półki
Kirigami.Page {

	Kirigami.OverlayDrawer {
		id: bottomDrawer
		edge: Qt.BottomEdge
		// Ustaw modal na false, aby umieścić tę półkę w wierszu!
		modal: true

		contentItem: RowLayout {
			Layout.fillWidth: true

			Kirigami.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="Modalna półka na dolnej krawędzi ekranu."/> <figcaption>
        <p>Modalna półka na dolnej krawędzi ekranu.</p>
    </figcaption>
Półka w wierszu na dolnej krawędzi ekranu.

Półka w wierszu na dolnej krawędzi ekranu.

Przypadek użycia dolnych półek nakładkowych: NeoChat

NeoChat używa półek nakładkowych na dole, aby dać użytkownikom kilka działań, które mogą oni wykonać na wiadomości, którą długo przycisnęli. Oto uproszczony przykład tego, co to robi:

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
           
           // Wiadomość powiadamiająca
           ...
           
           // Działania wiadomości
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}