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
andactionColor
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:
1 2 3 4 5 |
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:
1 2 3 4 5 6 7 |
import { NavigationView, Page, contentView } from 'tabris'; contentView.append( <NavigationView stretch drawerActionVisible={true}> <Page title="Albums"></Page> </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:
1 2 3 4 5 6 7 8 9 10 11 |
import { NavigationView, Page, contentView } from 'tabris'; contentView.append( <NavigationView stretch drawerActionVisible={true} actionColor='#ff5722' titleTextColor='#bfa964' toolbarColor='#fff3cd'> <Page title='Custom colours' /> </NavigationView> ); |
Now, take a look at the placement property of Action class. It allows you to position action icons differently inside the NavigationView:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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'); } |
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:
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 |
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}`}/> ); } |
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!