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

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

<ActionBar> is a UI component that provides a toolbar at the top of the activity window.

This component is the NativeScript abstraction for the Android app bar and the iOS navigation bar.


Using a title

<ActionBar title="MyApp" />

Using a custom title view

<ActionBar>
  <StackLayout orientation="horizontal">
    <Image src="res://icon" width="40" height="40" verticalAlignment="center" />
    <Label text="ativeScript" fontSize="24" verticalAlignment="center" />
  </StackLayout>
</ActionBar>

Setting an app icon for Android

<ActionBar title="My App" android.icon="res://icon" android.iconVisibility="always" />

Removing the border

By default, a border is drawn at the bottom of the <ActionBar>. In addition to the border, on iOS devices a translucency filter is also applied over the <ActionBar>.

To remove this styling from your app, you can set the flat property to true.

<ActionBar title="My App" flat="true" />

Props

NameTypeDescription
titleStringGets or sets the title shown in the bar.
android.iconStringGets or sets the icon to be shown on Android devices.
android.iconVisibilityStringGets or sets icon visibility on Android devices.
flatbooleanRemoves the border on Android and the translucency on iOS. Default value is false.

Native component

AndroidiOS
android.widget.ToolbarUINavigationBar
Contributors