Framework7 Status Bar - Framework7

What information does Status Bar contain in Framework7?


IOS 7+ allows the user to build full screen apps which could create an issue when your status bar overlaps the app. Framework7 solves this problem by detecting whether the app is in full screen mode or not. If the app is in full screen mode then, the Framework7 will automatically add statusbar-overlay class to <html> (or removes if app is not in full screen mode) and you need to add statusbar-overlay class in <body> as shown in below code:

By default, <div> will be always hidden and fixed on top of the screen and it will only be visible when app is in full screen mode and with-statusbar-overlay class is added to <html>.


Below example demonstrates use of status bar in the Framework7:


Below are the steps to see how above code works:

  • Save above html code as status_bar.html file in your server root folder.
  • Open this HTML file as http://localhost/status_bar.html and output as below gets displayed.

My App

This is simple application...

page contents goes here!!!

Example shows the use of the statusbar-overlay which will allow the users to build full screen apps when the status bar overlaps the app.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Framework7 Topics