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.

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.

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

	...

}
Nuestro nuevo cajón global

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

Cajón global con cabecera de barra de búsqueda

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.

Afortunadamente, los cajones globales de Kirigami proporcionan la propiedad isMenu. Si le asignamos el valor true, nuestro cajón global se convertirá en un menú más tradicional solo en el escritorio.

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()
		}
	]
}
Cajón global como menú en el escritorio

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

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"

	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()
		}
	]
}
Cajón global con un título y un icono en un banner

No obstante, de forma predeterminada, los banners solo son visibles en los entornos móviles. Puede cambiar este comportamiento asignando el valor true a la propiedad bannerVisible del componente del cajón global.

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.

Estos dos cajones son tan similares porque son, de hecho, el mismo componente de Kirigami: Kirigami.OverlayDrawer. Las propiedades importantes de este componente a tener en cuenta son:

  • modal controla si el cajón será modal o en línea según un valor booleano
  • edge controla en qué borde de la ventana de la aplicación aparecerá el cajón; las opciones para esta propiedad son Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge y Qt.LeftEdge
  • contentItem contiene el componente que formará el contenido del cajón
import QtQuick.Controls 2.15 as QQC2

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

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

}

 <figure class="text-center"><img src="modal_drawer.png"
     alt="Cajón modal en el borde inferior de la pantalla."/><figcaption>
        <p>Cajón modal en el borde inferior de la pantalla.</p>
    </figcaption>
Cajón en línea en el borde inferior de la pantalla.

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

Un caso de uso para cajones inferiores superpuestos: 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();
               }
           }
           ...
       }
    }
}
Previous
Tarjetas
Next
Hojas superpuestas