Cajones

Los cajones son paneles que se deslizan por los lados de la ventana de la aplicación. Pueden contener elementos interactivos, como acciones de Kirigami, botones y texto, entre otros.

Los cajones pueden ser de distintos tipos, formas y formatos. En esta página vamos a repasar cada tipo y proporcionaremos un resumen de sus características.

Cajón global

El cajón global es una funcionalidad estándar de las aplicaciones móviles de KDE, que a veces también se puede encontrar en sus reencarnaciones del escritorio. Contiene el menú principal de una aplicación: aquí se incluyen todas las funciones que no son específicas de la página actual, aunque siguen siendo importantes para la navegación general o la interacción dentro de la aplicación.

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.

Usamos componentes Kirigami.GlobalDrawer para crear este tipo de cajones. Para ello, los asignamos a la propiedad globalDrawer de la Kirigami.ApplicationWindow que constituye la base de nuestra aplicación 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()
            }
        ]
    }
}

Cabecera

Las cabeceras se pueden usar para situar componentes adhesivos en la parte superior de nuestro cajón global. Los componentes de cabecera permanecerán en su sitio incluso cuando el cajón global contiene acciones anidadas de Kirigami que sustituyen la capa actual del cajón 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()
            }
        ]
    }
}

Adaptación para el escritorio

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.

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

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

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

Cajones de contexto

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

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.

Cajones modales y en línea

Kirigami ofrece dos tipos adicionales de cajones: modales y en línea. Los dos son bastante similares: ambos se extienden por la totalidad de la anchura o de la altura de la aplicación y se pueden situar en los bordes de la ventana de la aplicación. No obstante, reaccionan de forma diferente a la interacción del usuario.

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

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 controla si el cajón será modal o en línea según un valor booleano.
• Drawer.edge controla en qué borde de la ventana de la aplicación aparecerá el cajón; las opciones para esta propiedad forman parte del enumerador Edge, en concreto Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge y Qt.LeftEdge.
• Popup.contentItem contiene el componente que formará el contenido del cajón.

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
            // Defina `modal` a falso para hacer que este cajón esté en línea.
            modal: true

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