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. 아니 유형 및 설명
1 패널 열기 및 닫기

당신은 패널 및 효과를 추가하면, 우리는 기능을 추가 할 필요가 개방가까운 패널.

2 패널 이벤트

사용자가 패널과 상호 작용하는 방식을 감지하기 위해 패널 이벤트를 사용할 수 있습니다.

스 와이프로 패널 열기

Framework7은 스 와이프 제스처로 패널을 여는 기능을 제공합니다 .

4 패널이 열려 있습니까?

패널을 열 었는지 여부는 with-panel[position]-[effect] 규칙.