Cajones

Los cajones proporcionan aplicaciones con acceso rápido a los controles y a las páginas de la aplicación.

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.

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

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.

Puede definir el componente de cabecera de su elección en la propiedad header del cajón global.

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

Nuestro cajón global muestra ahora el componente de barra de búsqueda que hemos definido como cabecera

Adaptación para el escritorio

Aunque los cajones globales de estilo panel pueden ser útiles en entornos móviles, es posible que sean demasiado grandes en el escritorio.

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

Nota

En este modo de menú, las cabeceras y los banners no son visibles.

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

Banners

Los banners le permiten mostrar un título y un icono en la parte superior de un cajón global (incluso sobre la cabecera).

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

Los títulos, definidos con la propiedad title , se pueden usar para embellecer un cajón global y hacer que parezca menos disperso. Más importante aún, puede recordar a los usuarios que este es un cajón global y para toda la aplicación en lugar de un cajón local.

También existe una propiedad titleIcon que se puede emparejar con el título para hacer que la estética del cajón global sea todavía más agradable. Este icono se situará a la izquierda del título.

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

Nota

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.

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

Cajón de contexto con acciones de contexto ocultas

Cajón de contexto mostrando todas las acciones de contexto

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.

El mismo ejemplo anterior, ejecutado en modo móvil

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.

Los cajones modales oscurecen el resto de la aplicación y, como las hojas superpuestas , se descartan al pulsar sobre un área oscurecida.
Los cajones en línea permiten que el usuario pueda interactuar con el resto de la aplicación sin ser descartados, y no oscurecen otras áreas.

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 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 contiene el componente que formará el contenido del cajón

import QtQuick.Controls 2.15 as Controls

Kirigami.Page {

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

Cajón modal en el borde inferior de la pantalla

Cajón en línea en el borde inferior de la pantalla

A use case for bottom overlay drawers: NeoChat

NeoChat usa cajones superpuestos en la parte inferior para proporcionar al usuario varias acciones que puede realizar sobre el mensaje que haya pulsado durante cierto tiempo. Esto es un ejemplo simplificado de cómo se muestra:

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
           
           // Información del mensaje
           ...
           
           // Acciones del mensaje
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}

Tarjetas

Hojas superpuestas