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