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

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

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

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

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

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

Її можна активувати натисканням кнопки меню-гамбургера або рухом пальця від лівого краю до середини екрана у режимі зліва праворуч або від правого краю у режимі справа ліворуч.

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

Знімок загальної висувної панелі у режимі робочої станції, коли вона виглядає як бічна панель

Нотатка

Властивість titleIcon визначає назву загальносистемної піктограми за специфікацією FreeDesktop. Піктограми і назви піктограм можна переглянути за допомогою програми CuttleFish KDE, яка є частиною plasma-sdk, або відвідавши сторінку специфікації назв піктограм FreeDesktop.

Шапка

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

Вибраний вами компонент шапки можна встановити за допомогою властивості header загальної панелі. Він замінить собою заголовок загальної висувної панелі. Це корисно, наприклад, для додавання Kirigami.SearchField:

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

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

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

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

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

Нотатка

У цьому режимі меню заголовки і банери є невидимими.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        // Ось дії Kirigami...
    ]
}

Загальна висувна панель у режимі меню, без шапки або банера

Контекстні висувні панелі

Kirigami.GlobalDrawer показує загальні кнопки дій, які доступні у вашій програмі, а Kirigami.ContextDrawer слід користуватися для показу дій, які стосуються лише певних контекстів. Ним, зазвичай, користуються на окремих сторінках.

Контекстну висувну панель буде показано, якщо було створено якусь contextualActions, як частину групи Page.actions. Вона також поводиться по-різному, залежно від того, є платформа мобільною чи стільничною.

На робочій станції, якщо у вікна достатньо місця, пункти контекстних дій буде показано як частину групи actions на верхній панелі інструментів. Якщо місце обмежено, зокрема на мобільних пристроях або у вузьких вікнах, пункти контекстних дій буде приховано за меню-гамбургером у правій частині вікна. Ця поведінка є відмінною від інших пунктів дій у групі actions, зокрема actions.main, actions.left і actions.right; ці пункти дій не буде приховано у вікнах із обмеженим розміром. Замість того, їх буде згорнуто до відповідних піктограм.

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

Контекстна висувна панель із прихованими контекстними пунктами дій

Контекстна висувна панель із показаними усіма контекстними пунктами дій

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

Той самий приклад, що і вище, але у режимі мобільного пристрою

Відкрита контекстна висувна панель у режимі мобільного пристрою

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

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

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

Цей тип висувної панелі є відкритим і гнучким, але загалом, ви можете скористатися тим типом висувної панелі, коли вам потрібно показати невеликий список пунктів при довгому натисканні або клацанні правою кнопкою миші.

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

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

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
            // Встановіть для `modal` значення `false`, щоб зробити цю висувну панель вбудованою!
            modal: true

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

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

Карти

Типи вікон