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ę.

It can be activated by tapping the hamburger menu or by swiping from the left edge to the middle of the screen in Left to Right mode or from the right edge in Right to Left mode.

Kirigami.GlobalDrawer components are what we use to create such drawers. These are set to the globalDrawer property of the Kirigami.ApplicationWindow that forms the basis of our Kirigami application.

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

Screenshot of a global drawer in desktop mode that looks like a sidebar

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

Our global drawer now shows the search bar component we set as the header

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.

Thankfully, Kirigami global drawers provide an isMenu property. When set to true, they turn into more traditional menus only on the desktop.

Uwaga

W tym trybie menu, nagłówki i banery nie są widoczne.

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

Global drawer in menu mode, without a header or banner

Strony oddzielające

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

By default, banners are only visible on mobile environments. You can change this by setting the global drawer component's bannerVisible property to true.

Titles, set with the title property, can be used to pretty up your global drawer and make it seem less sparse. More importantly, it can remind your users that this is a global and app-wide drawer rather than a local drawer.

There is also a titleIcon property, which can be paired with your title to make the global drawer even more aesthetically pleasing. This icon will be placed to the left of the title.

globalDrawer: Kirigami.GlobalDrawer {
    title: "My Global Drawer"
    titleIcon: "kde"
    bannerVisible: 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()
        }
    ]
}

Global drawer with title and icon in banner

Uwaga

The titleIcon property takes names for system-wide icons according to the FreeDesktop specification. These icons and icon names can be viewed with KDE's CuttleFish application which comes with plasma-sdk, or by visiting FreeDesktop's icon naming specification.

Context Drawers

While a Kirigami.GlobalDrawer displays global actions available throughout your application, a Kirigami.ContextDrawer should be used to display actions that are only relevant in certain contexts. This is usually used in separate pages.

A context drawer will only show up if any contextualActions have been created as part of the Page.actions group . It also behaves differently depending on whether it is being used on a mobile platform or on a desktop.

On a desktop, when a window has enough space, contextual actions show up as part of the actions group in the top toolbar. When space is limited, such as on a mobile device or in a narrow window, contextual actions are hidden behind a hamburger menu on the right side. This is different from other actions in the actions group, namely actions.main, actions.left and actions.right; these do not get hidden in space-constrained windows, and are instead collapsed into their respective icons.

 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
44
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    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 {
            main: Kirigami.Action {
                icon.name: "media-record"
            }
            left: Kirigami.Action {
                icon.name: "arrow-left"
            }
            right: Kirigami.Action {
                icon.name: "arrow-right"
            }
            contextualActions: [
                Kirigami.Action {
                    text: "Contextual Action 1"
                    icon.name: "media-playback-start"
                },
                Kirigami.Action {
                    text: "Contextual Action 2"
                    icon.name: "media-playback-stop"
                }
            ]
        }
    }
}

Context drawer with contextual actions hidden

Context drawer showing all contextual actions

On mobile, the drawer always consists of actions hidden behind a hamburger menu. It can be activated by tapping the hamburger menu or by swiping from the right edge to the middle of the screen in Left to Right mode or from the left edge in Right to Left mode. If you are on a desktop and want to test the mobile interface, you can run your application with the environment variable QT_QUICK_CONTROLS_MOBILE=1.

Same example above, running in mobile mode

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.

Modal drawers darken the rest of the application and, like overlay sheets , will be dismissed when clicking on a darkened area.
Półki w wierszu nadal umożliwiają użytkownikowi oddziaływać na resztę aplikacji bez ich odwołania i nie przyciemniają innych obszarów.

These two drawers are so similar because they can, in fact, be implemented using the same Kirigami component: Kirigami.OverlayDrawer . Here are a few important inherited properties of this component to keep in mind:

Popup.modal controls whether the drawer will be modal or inline depending on a boolean value
Drawer.edge controls which edge of the application window the drawer will appear on; options for this property are part of the Edge enum , namely Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge, and Qt.LeftEdge
Popup.contentItem contains the component that will form the content of your drawer

import QtQuick.Controls 2.15 as Controls

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

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

Modal drawer on the bottom edge of the screen

Inline drawer on the bottom edge of the screen

A use case for bottom overlay drawers: NeoChat

NeoChat uses bottom overlay drawers to provide the user with a number of actions they can perform on a message they have long pressed. Here is a simplified example of what that looks like:

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

Karty

Arkusze nakładkowe