Висувні панелі

Висувні панелі надають змогу створювати програми із панелями швидкого доступу до елементів керування та сторінок програми.

Висувні панелі є панелями, які висуваються з боків вікна програми. На ці панелі можна додати інтерактивні елементи, подібні до кнопок дій Kirigami, простих кнопок дій, текстових міток тощо.

Висувні панелі можуть належати до різних типів, можуть мати різні форми. На цій сторінці ми опишемо усі типи і оглянемо їхні характеристики.

Загальна панель

Загальна панель є стандартною можливістю у мобільних програмах KDE, яку іноді можна знайти і у їхніх варіантах для звичайних комп’ютерів. На ній міститься головне меню програми: до нього включено усі функції, які не є специфічними для поточної сторінки, але є важливими для загальної навігації або взаємодії у програмі.

Компоненти Kirigami.GlobalDrawer є тим, чим ми користуємося для створення таких висувних панелей. Назви цих панелей записують до властивості globalDrawer Kirigami.ApplicationWindow, яка складає основу нашої програми 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()
			}
		]
	}

	...

}
Наша нова загальна панель

Шапка

Шапками можна скористатися для розташування липких компонентів поверх вашої загальної панелі. Компоненти шапки лишаються на місці, навіть якщо загальна панель містить вкладені дії Kirigami, які замінюють поточний шар на загальній панелі.

Вибраний вами компонент шапки можна встановити за допомогою властивості 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()
		}
	]
}

Шапка панелі пошуку загальної панелі

Тепер на нашій загальній панелі буде показано компонент панелі пошуку, який ми визначили як шапку.

Адаптування для робочої станції

Хоча загальні панелі у стилі звичайних панелей можуть бути корисними у середовищах мобільних пристроїв, вони можуть бути надто великими на звичайних комп’ютерах.

На щастя, у загальних панелей Kirigami є властивість isMenu. Якщо для неї встановлено значення true, наші загальні панелі перетворюються у традиційніші меню лише на робочих станціях.

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()
		}
	]
}
Загальна панель як меню на комп’ютері

Банери

За допомогою банерів ви можете наказати програмі показувати заголовок і піктограму у верхній частині вашої загальної панелі (навіть над шапкою).

Заголовками, встановленими за допомогою властивості title, можна скористатися для удосконалення вигляду вашої загальної панелі і ущільнення компонування панелі. Важливіше, вони можуть нагадати вашим користувачам, що це загальна або загальнопрограмна висувна панель, а не локальна висувна панель.

Крім того, передбачено властивість titleIcon, яку можна поєднати із заголовком з метою надання загальній панелі ще більш естетично привабливого вигляду. Піктограму буде розташовано ліворуч від заголовка.

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()
		}
	]
}
Загальна панель із заголовком і піктограмою на банері

Втім, типово, банери буде показано лише у середовищах мобільних пристроїв. Змінити це можна встановленням для властивості bannerVisible компонента загальної панелі значення true.

Модальні і вбудовані панелі

У Kirigami передбачено два додаткових типи висувних панелей, модальні висувні панелі і вбудовані висувні панелі. Вони доволі подібні між собою: обидві займають усю ширину і висоту вікна програми і можуть бути розташовані на краях вікна програми. Втім, вони по-різному взаємодіють із користувачем.

  • Модальні висувні панелі затемнюють решту вікна програми і, подібно до накладних аркушів, закриваються, якщо відбудеться клацання на затемненій області.
  • Вбудовані висувні панелі надають змогу користувачеві продовжувати взаємодію із рештою програми без закриття панелей, і вони не затемнюють решту вікна програми.

Ці дві висувні панелі є подібними, оскільки вони, фактично, є одним компонентом — Kirigami.OverlayDrawer. Важливі властивості цього компонента, про які слід пам’ятати:

  • modal керує тим, буде висувна панель модальною чи вбудованою, залежно від цього булевого значення.
  • edge керує тим, з якого з країв вікна програми з’являтиметься панель; варіантами значення цієї властивості є Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge і Qt.LeftEdge
  • contentItem містить компонент, який формуватиме вміст вашої висувної панелі
Kirigami.Page {

	Kirigami.OverlayDrawer {
		id: bottomDrawer
		edge: Qt.BottomEdge
		// Встановіть для `modal` значення `false`, щоб зробити цю висувну панель вбудованою!
		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="Модальна висувна панель з нижнього краю екрана."/><figcaption>
        <p>Модальна висувна панель з нижнього краю екрана.</p>
    </figcaption>
Вбудована висувна панель з нижнього краю екрана.

Вбудована висувна панель з нижнього краю екрана.

Використання накладних нижніх висувних панелей — NeoChat

NeoChat використовує нижні накладні висувні панелі для надання у відповідь на довге натискання на пункті повідомлення у розпорядження користувача декількох пунктів дій, які користувач може виконати із повідомленням. Ось спрощений приклад того, як це виглядає:

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
           
           // Відомості щодо повідомлення
           ...
           
           // Дії з повідомленням
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}
Previous
Карти
Next
Накладні аркуші