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>は画面上部にツールバーを提供するためのUIコンポーネントです。

このコンポーネントはAndroidのapp bar、iOSのnavigation barをNativeScriptが抽象化したものです。


タイトルを使う

<ActionBar title="MyApp" />

タイトルの見た目をカスタマイズして使う

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

Android用にアプリのアイコンを設定する

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

枠線を無くす

デフォルトでは、枠線が<ActionBar>の下に描かれています。 枠線に加えて、iOSデバイスでは透過フィルターが<ActionBar>に適用されています。

このスタイリングを無くすには、 flatプロパティをtrueに設定します。

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

Props

名前説明
titleStringバーに表示されるタイトルを設定します。
android.iconStringAndroidデバイス上で表示されるアイコンを設定します。
android.iconVisibilityStringAndroidデバイス上でのアイコンの表示/非表示を設定します。
flatbooleanAndroidでは枠線を無くし、iOSでは透過フィルターを無くします。. デフォルトの値はfalseです。

Native component

AndroidiOS
android.widget.ToolbarUINavigationBar
Contributors