NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
ActionItem

This is an overview of the most common usage of ActionItem. For more information about the available properties, methods, or events, head over to the complete API documentation for ActionItem.

<ActionItem> is a UI component that lets you add action buttons to the <ActionBar> component.


Basic use

<ActionBar title="My App">
  <ActionItem @tap="onTapShare"
    ios.systemIcon="9" ios.position="left"
    android.systemIcon="ic_menu_share" android.position="actionBar" />
  <ActionItem @tap="onTapDelete"
    ios.systemIcon="16" ios.position="right"
    text="delete" android.position="popup" />
</ActionBar>

Conditionally showing action items

You can use the v-show directive to show <ActionItem> components based on a condition.

<ActionBar title="My App">
  <ActionItem @tap="onTapEdit"
    v-show="!isEditing"
    ios.systemIcon="2" ios.position="right"
    android.systemIcon="ic_menu_edit" />
  <ActionItem @tap="onTapSave"
    v-show="isEditing"
    ios.systemIcon="3" ios.position="right"
    android.systemIcon="ic_menu_save" />
  <ActionItem @tap="onTapCancel"
    v-show="isEditing"
    ios.systemIcon="1"
    android.systemIcon="ic_menu_close_clear_cancel" />
</ActionBar>

Props

NameTypeDescription
ios.systemIconNumberGets or sets the icon of the ActionItem for iOS. The value must be a number from the UIBarButtonSystemItem enumeration.
android.systemIconStringGets or sets the icon of the ActionItem for Android. The value must be the name of a drawable resource.
ios.positionStringGets or sets the position of the ActionItem within the ActionBar for iOS.
Valid values: left or right.
Default value is left.
android.positionStringGets or sets the position of the ActionItem within the ActionBar for Android.
Valid values:
actionBar (places the item in the ActionBar)
popup (places the item in the options menu; renders items as text)
actionBarIfRoom (places the item in the ActionBar if there is enough room for it there; otherwise, placess it in the options menu)
Default value is actionBar.

Events

NameDescription
tapEmitted when the ActionItem is tapped.

Native component

AndroidiOS
android.widget.ToolbarUINavigationItem
Contributors