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:

import { NavigationView, Page, contentView } from 'tabris';
 
new NavigationView({ layoutData: 'stretch', drawerActionVisible: true })
 .append(new Page({ title: 'Albums' }))
 .appendTo(contentView);

import { NavigationView, Page, contentView } from 'tabris';

new NavigationView({ layoutData: 'stretch', drawerActionVisible: true })

.append(new Page({ title: 'Albums' }))

.appendTo(contentView);

And the same code in JSX syntax:

import { NavigationView, Page, contentView } from 'tabris';
 
contentView.append(
 <NavigationView stretch drawerActionVisible={true}>
   <Page title="Albums"></Page>
 </NavigationView>
);

import { NavigationView, Page, contentView } from 'tabris';

contentView.append(

</NavigationView>

);

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:

import { NavigationView, Page, contentView } from 'tabris';
contentView.append(
 <NavigationView
   stretch
   drawerActionVisible={true}
   actionColor='#ff5722'
   titleTextColor='#bfa964'
   toolbarColor='#fff3cd'>
   <Page title='Custom colours' />
 </NavigationView>
);

import { NavigationView, Page, contentView } from 'tabris';

contentView.append(

<NavigationView

stretch

drawerActionVisible={true}

actionColor='#ff5722'

titleTextColor='#bfa964'

toolbarColor='#fff3cd'>

</NavigationView>

);

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

import {Action, NavigationView, Page, contentView, device} from 'tabris';
 
contentView.append(
 <NavigationView stretch>
   <Action placement='navigation' image={getImage('close')}/>
   <Action placement='default' image={getImage('settings')}/>
   <Action placement='overflow' title='Share'/>
   <Page title="Title"></Page>
 </NavigationView>
);
 
function getImage(image) {
 return 'resources/' + image + (device.platform === 'iOS' ? '-black-24dp@3x.png' : '-white-24dp@3x.png');
}

import {Action, NavigationView, Page, contentView, device} from 'tabris';

contentView.append(

</NavigationView>

);

function getImage(image) {

return 'resources/' + image + (device.platform === 'iOS' ? '-black-24dp@3x.png' : '-white-24dp@3x.png');

}

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:

import {Button, NavigationView, Page, contentView, StackLayout} from 'tabris';
 
contentView.append(
 <NavigationView stretch>
   <CustomPage title='Initial Page'/>
 </NavigationView>
);
 
const navigationView = $(NavigationView).only();
let pageCount = 0;
 
function CustomPage(attributes) {
 const pageLayout = new StackLayout({alignment: 'stretchX', spacing: 16});
 return (
   <Page padding={16} layout={pageLayout} {...attributes}>
     <Button onSelect={addPage}>Create another page</Button>
     <Button onSelect={goBack}>Go back</Button>
     <Button onSelect={goToInitialPage}>Go to initial page</Button>
   </Page>
 );
}
 
function goToInitialPage() {
 navigationView.pages().slice(1).dispose();
}
 
function goBack() {
 if (navigationView.pages().length > 1) {
   navigationView.pages().last().dispose();
 }
}
 
function addPage() {
 navigationView.append(
   <CustomPage title={`Page ${++pageCount}`}/>
 );
}

import {Button, NavigationView, Page, contentView, StackLayout} from 'tabris';

contentView.append(

</NavigationView>

);

const navigationView = $(NavigationView).only();

let pageCount = 0;

function CustomPage(attributes) {

const pageLayout = new StackLayout({alignment: 'stretchX', spacing: 16});

return (

<Button onSelect={addPage}>Create another page</Button>

<Button onSelect={goToInitialPage}>Go to initial page</Button>

</Page>

);

}

function goToInitialPage() {

navigationView.pages().slice(1).dispose();

}

function goBack() {

if (navigationView.pages().length > 1) {

navigationView.pages().last().dispose();

}

function addPage() {

navigationView.append(

);

}

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.

Feedback is welcome!

Want to join the discussion?
Feel free to contribute!

SLACK

GITHUB

Tabris.js Widgets: NavigationView

Feedback is welcome!

Stay tuned! Subscribe to our Developer Newsletter

CONTACT

LEARN MORE

LEGAL STUFF

SEE MORE