Framework7 - Painéis Laterais

Descrição

O painel lateral se move para o lado esquerdo ou direito da tela para exibir o conteúdo. Framework7 permite que você inclua até 2 painéis (painel do lado direito e painel do lado esquerdo) para seu aplicativo. Você precisa adicionar painéis no início de <body> e, em seguida, escolher o efeito de abertura aplicando as seguintes classes listadas -

  • panel-reveal - Isso fará com que todo o conteúdo do aplicativo seja removido.

  • panel-cover - Isso fará com que o painel se sobreponha ao conteúdo do aplicativo.

Por exemplo, o código a seguir mostra como usar as classes acima -

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

A tabela a seguir mostra os tipos de painel suportados pelo Framework77 -

S.Não Tipo e descrição
1 Abrir e fechar painéis

Depois de adicionar painel e efeitos, precisamos adicionar funcionalidade para abrir e fechar os painéis.
2 Eventos do Painel

Para detectar como um usuário interage com o painel, você pode usar eventos de painel.
3 Painéis abertos com deslize

Framework7 fornece a você o recurso de abrir o painel com um gesto de furto .
4 O painel está aberto?

Podemos determinar se o painel está aberto ou não usando o with-panel[position]-[effect] regra.