Another Vue of NativeScript 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> es un componente UI que ofrece una barra de herramientas en la parte superior de la ventana.

El componente ActionBar es una abstraccio4n de NativeScript del ActionBar de Android y el NavigationBar de iOS.


Configurando un título

<ActionBar title="MyApp" />

Configurando un título con apariencia personalizada

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

Configurando un ícono de aplicación para Android

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

Eliminando el borde

Tanto en Android como en iOS, un pequeño borde es dibujado en la parte inferior del componente ActionBar. Además, el color de fondo del ActionBar de iOS is levemente diferente al que uno especifíca ya que iOS aplica un filtro. Para eliminar este filtro y el borde, puedes usar el atributo flat con el valor true.

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

Propiedades

NombreTipoDescripción
titleStringEl título que se desea mostrar.
android.iconStringEl ícono para mostrar en Android.
android.iconVisibilityStringIndica cuando el ícono esta visible o no (solo Android).
flatbooleanElimina el borde y el filtro en iOS.
Valor por defecto: false.

Componente nativo

AndroidiOS
android.widget.ToolbarUINavigationBar
Contributors