Status Bar Vue Component

Status Bar Vue component represents Status bar overlay in Framework7.

Usage example

<div id="app">
  <!-- Should be placed as the first child in the app root -->
  <f7-statusbar></f7-statusbar>
  ...
</div>

Renders to:

<div id="app">
  <div class="statusbar-overlay"></div>
  ...
</div>

Properties

Prop	Type	Default	Description
side	string		Panel side. Could be "left" or "right"
left	boolean		Shortcut prop for side="left"
right	boolean		Shortcut prop for side="right"
effect	string		Panel effect. Could be "cover" or "reveal"
cover	boolean		Shortcut prop for effect="cover"
reveal	boolean		Shortcut prop for effect="reveal"
theme	string		Panel theme color. One of default colors
layout	string		Panel layout theme. One of default layout themes
opened	boolean		Allows to open/close panel and set its initial state

Events

Event	Description
panel:open	Event will be triggered when Panel starts its opening animation
panel:opened	Event will be triggered after Panel completes its opening animation
panel:close	Event will be triggered when Panel starts its closing animation
panel:closed	Event will be triggered after Panel completes its closing animation