Tabris.js Widgets: Action
The Action class represents an interactive entry in the navigation toolbar (NavigationView). Action can be imagined as something similar to tag in HTML or Tabris.js Button widget. The key difference is that Action can’t be appended to any Composites except NavigationView and meant to work only as a part of the navigation menu.
This is how simple Action looks in JS syntax:
|
1 2 3 4 5 6 7 8 |
import { Action, NavigationView, contentView } from 'tabris'; const navigationView = new NavigationView({ layoutData: 'stretch' }).append( new Action({ title: 'Settings', image: 'resources/settings.png' }).onSelect(() => console.log('Settings selected')) ); |
And the same example in JSX:
|
1 2 3 4 5 6 7 8 |
import { Action, NavigationView, contentView } from 'tabris'; contentView.append( <NavigationView stretch> <Action title='Settings' image='resources/settings.png' onSelect={() => console.log('Settings selected')} /> </NavigationView> ); |
Image and title properties specify an icon image and description text for the action, and onSelect() defines what will happen once the action is clicked.
If there are too many actions on the navigation bar, some of them will be hidden inside a dropdown action menu. Use overflow value for the placement property to put some actions inside the dropdown right away. You also got the option to put an action icon to the top left position that is normally occupied by the drawer/back button by changing placement value to navigation. This way you can create a custom “go back” button or replace it with a “close” button, for example:
|
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'); } |
Use the widget documentation page to see more detailed information.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
