Badges and Statusbar

Badges, Notifications and the Statusbar

A badge is a <span class="badge"> with an optional color class. Placed inside a tab bar or navbar icon, it is pinned to the icon's top-right corner, as on BookNest's Cart tab.

A notification is an in-app banner that slides down from the top, not a system push notification (that needs a native plugin; see Push Notifications). BookNest's "Add to cart" handler dispatches the Store action, then calls $f7.notification.create() with an icon, title: 'BookNest', titleRightText: 'now', a subtitle, text: book.title and closeTimeout: 3000, then .open(). swipeToClose defaults to true; closeButton and closeOnClick to false. Panel C of the book page figure in Toolbar and Tabbar Placement shows the iOS glass card.

The Statusbar component styles the system status bar, but only under Cordova 129 or Capacitor 243,123 (Orientation and Statusbar and Status Bar and Splash Screen): it calls their status bar plugins and in a browser does nothing. Configure it with statusbar: { iosTextColor: 'white', androidBackgroundColor: '#b3541e' }, or at run time with app.statusbar.setBackgroundColor(), setTextColor(), hide() and show().