Framework7 - Pannelli laterali

Descrizione

Il pannello laterale si sposta sul lato sinistro o destro dello schermo per visualizzare il contenuto. Framework7 ti consente di includere fino a 2 pannelli (pannello laterale destro e pannello laterale sinistro) nella tua app. È necessario aggiungere pannelli all'inizio del <body> e quindi scegliere l'effetto di apertura applicando le seguenti classi elencate:

  • panel-reveal - Questo farà spostare l'intero contenuto dell'app.

  • panel-cover - Questo farà sì che il pannello si sovrapponga al contenuto dell'app.

Ad esempio, il codice seguente mostra come utilizzare le classi precedenti:

<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 tabella seguente mostra i tipi di pannello supportati da Framework77 -

S.No Tipo e descrizione
1 Pannelli aperti e chiusi

Dopo aver aggiunto il pannello e gli effetti, è necessario aggiungere funzionalità per aprire e chiudere i pannelli.
2 Eventi del pannello

Per rilevare come un utente interagisce con il pannello, puoi utilizzare gli eventi del pannello.
3 Pannelli aperti con scorrimento

Framework7 fornisce la funzionalità per aprire il pannello con il gesto di scorrimento .
4 Il pannello è aperto?

Possiamo determinare se il pannello è aperto o meno utilizzando il file with-panel[position]-[effect] regola.