Framework7 - Panel Is Opened?

Description

We can determine whether a panel is opened or not. Whenever some panel is opened, the <body> will have additional generated classes as shown below which uses the with-panel-[position]-[effect] rule.

  • When you have left panel opened with cover effect, the body will have with-panel-left-cover class.

  • When you have left panel opened with reveal effect, the body will have with-panel-left-reveal class.

  • When you have right panel opened with cover effect, the body will have with-panel-right-cover class.

  • When you have right panel opened with reveal effect, the body will have with-panel-right-reveal class.

You can use it in JavaScript or in CSS to detect an opened panel as shown below −

In JavaScript

if ($$('body').hasClass('with-panel-left-cover')) {
   console.log('Left Panel is opened')
}

In CSS

body.with-panel-left-cover .statusbar-overlay {
   background-color: #333;
}

This will change the status bar background when the panel is opened.

framework7_side_panels.htm
Advertisements