Language: ENCN

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