Áreas

As áreas são painéis que deslizam dos lados da janela da aplicação. Os mesmos poderão ser preenchidos com elementos interactivos como acções, botões, texto, entre outras coisas do Kirigami.

As áreas existem sob diferentes tipos, formas e formatos. Nesta página iremos passar por cada tipo e dar uma visão geral das suas características.

Área global

A área global é uma característica-padrão das aplicações móveis e que poderá ser encontrada alguma vezes nas suas versões futuras. Contém um menu principal da aplicação: neste existem as funções que não sejam específicas da página actual, mas que sejam à mesma relevantes para a navegação geral ou para alguma interacção dentro da aplicação.

Poderá ser activado se tocar no menu do hambúrguer ou deslizando do extremo esquerdo para o meio do ecrã, no modo da Esquerda para a Direita, ou do extremo direito para o centro no modo da Direita para a Esquerda.

Os componentes Kirigami.GlobalDrawer são o que usamos para criar essas áreas. São configurados na propriedade globalDrawer do Kirigami.ApplicationWindow que forma a base da nossa aplicação de 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()
            }
        ]
    }
}

Cabeçalho

Os cabeçalhos poderão ser usados para colocar componentes fixos no topo da sua área global. Os componentes de cabeçalho irão permanecer no lugar, mesmo que a sua área global tenha acções encadeadas do Kirigami que substituam a camada actual na área global.

Your chosen header component can be set with the global drawer's header property, and it will replace the global drawer's title. This is useful to add a Kirigami.SearchField, for example:

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

Adaptar-se ao computador

While panel-style global drawers can be useful in mobile environments, they might be too large on the desktop, especially when the application has few actions.

Felizmente, as áreas globais do Kirigami oferecem uma propriedade isMenu. Quando for configurada como true, as nossas áreas globais transformam-se em menus mais tradicionais no computador.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        // Kirigami Actions here...
    ]
}

Áreas de Contexto

Enquanto um Kirigami.GlobalDrawer mostra as acções globais disponíveis por toda a sua aplicação, um Kirigami.ContextDrawer deverá ser usado para mostrar as acções que só são relevantes em determinados contextos. Este é normalmente usado em páginas separadas.

Uma área de contexto só irá aparecer se tiver criado alguma variável contextualActions como parte do grupo Page.actions. Também se comporta de forma diferente, dependendo se é usado num dispositivo móvel ou num computador.

Num computador, quando uma janela tem espaço suficiente, as acções de contexto aparecem como parte do grupo actions na barra de ferramentas de topo. Quando o espaço é limitado, como acontece num dispositivo móvel ou numa janela estreita, as acções de contexto ficam escondidas num menu em hambúrguer do lado direito. Isto é diferente das outras acções no grupo actions, nomeadamente as actions.main, actions.left e actions.right; estas não ficam escondidas nas janelas bastante reduzidas, sendo sim reduzidas nos seus respectivos ícones.

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

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.

Áreas Modais e Incorporadas

O Kirigami oferece dois tipos adicionais de áreas, as áreas modais e as incorporadas. Estas são muito parecidas entre si: ambas ocupam por inteiro a largura ou altura da aplicação e poderão ser colocadas nos extremos da janela da aplicação . Contudo, reagem de forma diferente à interacção com o utilizador.

• Modal drawers are hidden by default and darken the rest of the application, being dismissed when clicking on a darkened area.
• Inline drawers are shown by default and allow the user to still interact with the rest of the application without being dismissed, and do not darken other areas.

This kind of drawer is open ended and flexible, but generally, you may want to use this kind of drawer when you want a small list of options to appear on a long press or right click.

Estas das áreas são muito parecidas porque, de facto, são o mesmo componente do Kirigami: o Kirigami.OverlayDrawer. Algumas propriedades deste componente a ter em mente:

• 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
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
            // Configure o `modal` como falso para tornar esta área incorporada!
            modal: true

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