Framework7 - Paneles laterales

Descripción

El panel lateral se mueve hacia el lado izquierdo o derecho de la pantalla para mostrar el contenido. Framework7 le permite incluir hasta 2 paneles (panel lateral derecho y panel lateral izquierdo) en su aplicación. Debe agregar paneles al comienzo del <body> y luego elegir el efecto de apertura aplicando las siguientes clases enumeradas:

  • panel-reveal - Esto hará que se mueva todo el contenido de la aplicación.

  • panel-cover - Esto hará que el panel se superponga al contenido de la aplicación.

Por ejemplo, el siguiente código muestra cómo usar las clases anteriores:

<body>
   <!-- First add Panel's overlay which will overlays app while panel is opened -->
   <div class = "panel-overlay"></div>
 
   <!-- Left panel -->
   <div class = "panel panel-left panel-cover">
      panel's content
   </div>
 
   <!-- Right panel -->
   <div class = "panel panel-right panel-reveal">
      panel's content
   </div>
 
</body>

La siguiente tabla muestra los tipos de paneles admitidos por Framework77:

S. No Tipo y descripción
1 Abrir y cerrar paneles

Una vez que agrega el panel y los efectos, necesitamos agregar funcionalidad para abrir y cerrar los paneles.
2 Eventos del panel

Para detectar cómo interactúa un usuario con el panel, puede utilizar los eventos del panel.
3 Abrir paneles con deslizar

Framework7 le brinda la función de abrir el panel con un gesto de deslizamiento .
4 ¿El panel está abierto?

Podemos determinar si el panel está abierto o no usando el with-panel[position]-[effect] regla.