Tabris.js Widgets: StatusBar
The status bar is the area where notifications, status icons, battery charge icon, and device time are displayed. You can modify its looks from Tabris application using StatusBar singleton instance. Here is an example:
|
1 2 3 4 |
import { statusBar } from 'tabris'; statusBar.background = 'red'; statusBar.displayMode = 'float'; |
You can modify status bar background color to match your app color scheme, text color, or completely hide the StatusBar. We have prepared an example that allows you to test all the available options. Run the script below by scanning its QR code using the Tabris Developer App:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import { Picker, TextView, contentView, statusBar } from 'tabris'; const THEMES = ['default', 'light', 'dark']; const DISPLAY_MODES = ['default', 'float', 'hide']; const BACKGROUNDS = ['initial', 'rgba(0, 0, 0, 0.25)', 'red', 'green', 'blue']; createTextView('Theme', 'theme'); createTextView('Display mode', 'displayMode'); createTextView('Background', 'background'); createTextView('Height', 'height'); new Picker({ left: '#displayMode 16', baseline: '#theme', right: 16, itemCount: THEMES.length, itemText: index => THEMES[index] }).onSelect(({ index }) => statusBar.theme = THEMES[index]) .appendTo(contentView); new Picker({ left: '#displayMode 16', baseline: '#displayMode', right: 16, itemCount: DISPLAY_MODES.length, itemText: index => DISPLAY_MODES[index] }).onSelect(({ index }) => statusBar.displayMode = DISPLAY_MODES[index]) .appendTo(contentView); new Picker({ left: '#displayMode 16', baseline: '#background', right: 16, itemCount: BACKGROUNDS.length, itemText: index => BACKGROUNDS[index] }).onSelect(({ index }) => statusBar.background = BACKGROUNDS[index]) .appendTo(contentView); new TextView({ left: '#displayMode 16', baseline: '#height', right: 16, text: statusBar.height.toString() }).appendTo(contentView); function createTextView(text, id) { new TextView({ id, left: 16, top: 'prev() 44', text }).appendTo(contentView); } statusBar.onTap(() => console.log('Status bar tapped')); |
Also, on iOS, you can use the tap event that is fired when the user is touching the StatusBar. It allows you to retrieve the touch coordinates relating to the origin coordinates of the widget.
For more detailed information about the widget, use the StatusBar documentation page.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
