Status Bar React component represents Status bar overlay in Framework7.
<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>
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 | 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 |