Class “Action”
Object > NativeObject > Widget > Action
An executable item that is integrated in the application’s navigation menu. Add a select listener to react to action taps.
| Constructor | public |
| Singleton | No |
| Namespace | tabris |
| Direct subclasses | SearchAction |
| JSX support | Element: <Action/>Parent element: <NavigationView/>Child elements: None Text content: Sets title property |
Example
import {Action, NavigationView, contentView} from 'tabris';
const navigationView = new NavigationView({layoutData: 'stretch'})
.appendTo(contentView);
new Action({
title: 'Settings',
image: 'resources/settings.png'
}).onSelect(() => console.log('Settings selected'))
.appendTo(navigationView);
See also:
JSX Creating a simple Action
JSX Using placement property
Constructor
new Action(properties?)
| Parameter | Type | Optional | Description |
|---|---|---|---|
| properties | Properties<Action> |
Yes | Sets all key-value pairs in the properties object as widget properties. |
Properties
image
Icon image for the action.
On iOS the image is tinted with the apps default accent color whereas on Android the image is shown as is. When an action is placed into a NavigationView, the NavigationView property actionColor can be used to adjust the action tint color.
| Type | ImageValue |
| Settable | Yes |
| Change events | Yes |
placement
Actions with ‘default’ placement will be visible in the toolbar if enough space is available, otherwise moved to the overflow section. Setting the property to ‘overflow’ makes the action appear there exclusively. Lastly, ‘navigation’ puts the action in the position normally occupied by the drawer/back button. If multiple actions have this value only the first one is displayed.
| Type | 'default' | 'overflow' | 'navigation' |
| Default | 'default' |
| Settable | Yes |
| Change events | Yes |
title
The text to be displayed for the action.
When an action is placed into a NavigationView, the NavigationView property actionTextColor can be used to adjust the action title color on Android.
| Type | string |
| Settable | Yes |
| Change events | Yes |
| JSX content type | string |
When using Action as an JSX element the element content is mapped to this property. Therefore
<Action>Hello World</Action>
has the same effect as:
<Action title='Hello World' />
Events
select
Fired when the action is invoked.
Change Events
imageChanged
Fired when the image property has changed.
| Parameter | Type | Description |
|---|---|---|
| value | ImageValue |
The new value of image. |
placementChanged
Fired when the placement property has changed.
| Parameter | Type | Description |
|---|---|---|
| value | string |
The new value of placement. |
titleChanged
Fired when the title property has changed.
| Parameter | Type | Description |
|---|---|---|
| value | string |
The new value of title. |
