Widget “NavigationBar”

Extends Widget

The navigation bar is the onscreen area where Back, Home and similar buttons are displayed. The singleton instance can be accessed via ui.navigationBar and is only supported on Android.

You can import this type like this:

import {NavigationBar} from 'tabris';

Or reference it directly form anywhere as “tabris.NavigationBar”.

Properties

background

< span class = 'android-tag' title = 'supported on Android' > Android < /span>

Type: Color

Background color of the navigation bar.

displayMode

< span class = 'android-tag' title = 'supported on Android' > Android < /span>

Type: string, supported values: default, hide, float, default: default

Controls how the navigation bar is positioned relative to the ui.contentView. The value default places the content above the navigation bar. The hide option lets the navigation bar disappear, making room for the content. The float option lets the content flow underneath the navigation bar.

height

< span class = 'android-tag' title = 'supported on Android' > Android < /span>

read-only
Type: number

The height of the navigation bar in device independent pixel. Can be used in conjunction with the displayMode float to offset the content as to not have it covered by the navigation bar.
This property can only be set on widget creation. Once set, it cannot be changed anymore.

theme

< span class = 'android-tag' title = 'supported on Android' > Android < /span>

Type: string, supported values: default, light, dark, default: default

Defines the appearance used on the navigation bar. A dark theme sets the foreground navigation icons to be of a light color, whereas light sets the icons to a dark color. The theme should be set in conjunction with the background property for contrast. The value default selects the default theme that depends on the device and on the app. Available on Android 8+.

Events

backgroundChanged

Fired when the background property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: Color The new value of background.

displayModeChanged

Fired when the displayMode property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: string The new value of displayMode.

themeChanged

Fired when the theme property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: string The new value of theme.

Example

import {Picker, TextView, ui} from 'tabris';

const THEMES = ['default', 'light', 'dark'];
const DISPLAY_MODES = ['default', 'float', 'hide'];
const BACKGROUNDS = [ui.navigationBar.background, '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]
}).on('select', ({index}) => ui.navigationBar.theme = THEMES[index])
  .appendTo(ui.contentView);

new Picker({
  left: '#displayMode 16', baseline: '#displayMode', right: 16,
  itemCount: DISPLAY_MODES.length,
  itemText: index => DISPLAY_MODES[index]
}).on('select', ({index}) => ui.navigationBar.displayMode = DISPLAY_MODES[index])
  .appendTo(ui.contentView);

new Picker({
  left: '#displayMode 16', baseline: '#background', right: 16,
  itemCount: BACKGROUNDS.length,
  itemText: index => BACKGROUNDS[index]
}).on('select', ({index}) => ui.navigationBar.background = BACKGROUNDS[index])
  .appendTo(ui.contentView);

new TextView({
  left: '#displayMode 16', baseline: '#height', right: 16,
  text: ui.navigationBar.height
}).appendTo(ui.contentView);

function createTextView(text, id) {
  new TextView({
    id,
    left: 16, top: 'prev() 16',
    text
  }).appendTo(ui.contentView);
}

See also