Framework7-サイドパネル

説明

サイドパネル画面の左側または右側に移動してコンテンツを表示します。Framework7では、最大2つのパネル（右側のパネルと左側のパネル）をアプリに含めることができます。<body>の先頭にパネルを追加してから、次のクラスを適用してオープニングエフェクトを選択する必要があります-

panel-reveal −これにより、アプリのコンテンツ全体が移動します。
panel-cover −これにより、パネルがアプリのコンテンツにオーバーレイされます。

たとえば、次のコードは、上記のクラスの使用方法を示しています-

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

次の表は、Framework77でサポートされているパネルタイプを示しています。

S.No	タイプと説明
1	パネルを開いたり閉じたりするあなたはパネルやエフェクトを追加すると、我々はに機能を追加する必要があり、オープンとクローズのパネル。
2	パネルイベントユーザーがパネルをどのように操作したかを検出するには、パネルイベントを使用できます。
3	スワイプでパネルを開く Framework7は、スワイプジェスチャでパネルを開く機能を提供します。
4	パネルが開いていますか？パネルが開いているかどうかは、 with-panel[position]-[effect] ルール。