Status Bar React Component

Status Bar React component represents Status bar overlay in Framework7.

Usage example

<div id="app">
  <!-- Should be placed as the first child in the app root -->
  <StatusBar></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

Event Properties

Event Description
onPanelOpen Event will be triggered when Panel starts its opening animation
onPanelOpened Event will be triggered after Panel completes its opening animation
onPanelClose Event will be triggered when Panel starts its closing animation
onPanelClosed Event will be triggered after Panel completes its closing animation