ActionBar - NativeScript-Vue

<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="NativeScript" 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

Name	Type	Description
`title`	`String`	Gets or sets the title shown in the bar.
`android.icon`	`String`	Gets or sets the icon to be shown on Android devices.
`android.iconVisibility`	`String`	Gets or sets icon visibility on Android devices.
`flat`	`boolean`	Removes the border on Android and the translucency on iOS. Default value is `false`.

Native component

Android	iOS
`android.widget.Toolbar`	`UINavigationBar`