Висувні панелі
Висувні панелі є панелями, які висуваються з боків вікна програми. На ці панелі можна додати інтерактивні елементи, подібні до кнопок дій 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()
}
]
}

Нотатка
ВластивістьtitleIcon
визначає назву загальносистемної піктограми за специфікацією FreeDesktop. Піктограми і назви піктограм можна переглянути за допомогою програми CuttleFish KDE або відвідавши сторінку специфікації назв піктограм FreeDesktop.Втім, типово, банери буде показано лише у середовищах мобільних пристроїв. Змінити це можна встановленням для властивості bannerVisible
компонента загальної панелі значення true
.
Модальні і вбудовані панелі
У Kirigami передбачено два додаткових типи висувних панелей, модальні висувні панелі і вбудовані висувні панелі. Вони доволі подібні між собою: обидві займають усю ширину і висоту вікна програми і можуть бути розташовані на краях вікна програми. Втім, вони по-різному взаємодіють із користувачем.
- Модальні висувні панелі затемнюють решту вікна програми і, подібно до накладних аркушів, закриваються, якщо відбудеться клацання на затемненій області.
- Вбудовані висувні панелі надають змогу користувачеві продовжувати взаємодію із рештою програми без закриття панелей, і вони не затемнюють решту вікна програми.
Ці дві висувні панелі є подібними, оскільки вони, фактично, є одним компонентом — Kirigami.OverlayDrawer
. Важливі властивості цього компонента, про які слід пам'ятати:
modal
керує тим, буде висувна панель модальною чи вбудованою, залежно від цього булевого значення.edge
керує тим, з якого з країв вікна програми з'являтиметься панель; варіантами значення цієї властивості єQt.TopEdge
,Qt.RightEdge
,Qt.BottomEdge
іQt.LeftEdge
contentItem
містить компонент, який формуватиме вміст вашої висувної панелі
import QtQuick.Controls 2.15 as QQC2
Kirigami.Page {
Kirigami.OverlayDrawer {
id: bottomDrawer
edge: Qt.BottomEdge
// Встановіть для `modal` значення `false`, щоб зробити цю висувну панель вбудованою!
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="Модальна висувна панель з нижнього краю екрана."/><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();
}
}
...
}
}
}