Widget “NavigationView”

Extends Composite

A widget that displays a stack of pages with a toolbar that allows to navigate back. The toolbar also displays the current page’s title and the highest priority actions that are added to the NavigationView. Only children of type Page, Action and SearchAction are supported. Since the NavigationView does not compute its own size, the width and height must be defined by the respective layout properties (e.g. either width or left and right must be specified).

You can import this type like this:

import {NavigationView} from 'tabris';

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

Methods

pages(selector)

Parameters:

  • selector: Selector [Optional]
    • a selector expression or a predicate function to filter the results.

Returns: WidgetCollection

Returns the ordered list of pages on the page stack, with the bottommost page as the first and the topmost page as the last element. Same as children(), but only returns children that are of type Page.

Properties

actionColor

Type: Color

The color used for action icons.

actionTextColor

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

Type: Color

The color used for action texts. Only applied on Android, IOS uses the actionColor to colorize the action text.

drawerActionVisible

Type: boolean

Whether to display the so-called “Burger menu” to open the drawer.

Type: Action, default: null

Action that replaces back button and arrow. When it is replaced the developer is responsible for providing a way to go back on the page stack. Setting the action to null restores back button and arrow.

pageAnimation

Type: string, supported values: default, none, default: default

Controls what animation to use when animating a page transition.

titleTextColor

Type: Color

The text color used for page titles.

toolbarColor

Type: Color

The background color of the toolbar.

toolbarHeight

Type: number

The height of the toolbar. Is 0 if not visible.

toolbarVisible

Type: boolean, default: true

Whether the toolbar is visible.

Events

actionColorChanged

Fired when the actionColor property has changed.

Event Parameters

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

  • value: Color The new value of actionColor.

actionTextColorChanged

Fired when the actionTextColor property has changed.

Event Parameters

drawerActionVisibleChanged

Fired when the drawerActionVisible property has changed.

Event Parameters

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

  • value: boolean The new value of drawerActionVisible.

Fired when the navigationAction property has changed.

Event Parameters

pageAnimationChanged

Fired when the pageAnimation property has changed.

Event Parameters

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

  • value: string The new value of pageAnimation.

titleTextColorChanged

Fired when the titleTextColor property has changed.

Event Parameters

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

  • value: Color The new value of titleTextColor.

toolbarColorChanged

Fired when the toolbarColor property has changed.

Event Parameters

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

  • value: Color The new value of toolbarColor.

toolbarHeightChanged

Fired when the height of the toolbar changes, e.g. if it changes visibility.

Event Parameters

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

  • value: number The new value of toolbarHeight.

toolbarVisibleChanged

Fired when the toolbarVisible property has changed.

Event Parameters

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

  • value: boolean The new value of toolbarVisible.

See also