Tabris.js Widgets: NavigationView

This widget represents a stack of pages and a toolbar that allows a user to go back from one page to the previous one. The toolbar is also used for displaying the current page’s title and action icons.

The super class for the widget is Composite because NavigationView can contain other widgets. NavigationView only supports children of type Page, Action and SearchAction. Use the methods provided by Composite to manipulate child widgets.

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):

  • The drawerActionVisible property controls whether the so-called “burger icon” button for opening the drawer, is displayed;
  • The actionTextColor and actionColor properties allow you to customize the colors of the toolbar action icons and text;
  • Property pageAnimation enables/disables page transition animations.

Here is an example of simple NavigationView in JS syntax:

And the same code in JSX syntax:

Notice that even if the drawerActionVisible property is set to true and you see a “burger icon” button, the Drawer will not magically appear by itself. You still need to import its singleton instance and enable it to make actual use of drawerActionVisible.

Let’s add a bit more colors to the widget:

Now, take a look at the placement property of Action class. It allows you to position action icons differently inside the NavigationView:

NavigationView is used for making navigations between pages smooth and simple. Here is an example code, but first run the QR code below using the Tabris Developer App:

In Tabris.js GitHub repository you can find more complex and interesting examples. They can also be easily loaded in Tabris Playground, like this example of NavigationView with Tabs. Check it out!

For more detailed information about this widget, use the NavigationView documentation page.