mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
148 lines
4.1 KiB
Markdown
148 lines
4.1 KiB
Markdown
---
|
|
nav-title: "ActionBar How-To"
|
|
title: "action-bar"
|
|
environment: nativescript
|
|
description: "Examples for using ActionBar"
|
|
previous_url: /ApiReference/ui/action-bar/HOW-TO
|
|
---
|
|
# ActionBar
|
|
Using a ActionBar requires the action-bar module.
|
|
{%snippet actionbar-common-require%}
|
|
|
|
|
|
## Setting Title and Icon
|
|
```XML
|
|
<Page>
|
|
<Page.actionBar>
|
|
{%raw%}<ActionBar title="{{ title }}" android.icon="res://is_custom_home_icon"/>{%endraw%}
|
|
</Page.actionBar>
|
|
...
|
|
</Page>
|
|
```
|
|
The icon can only be set in Android platform. It is hidden by default, but you explicitly control its visibility with the `android.iconVisibility' property.
|
|
|
|
## Setting Custom Title View
|
|
```XML
|
|
<Page loaded="pageLoaded">
|
|
<Page.actionBar>
|
|
<ActionBar title="Title">
|
|
<ActionBar.titleView>
|
|
<StackLayout orientation="horizontal">
|
|
<Button text="1st" />
|
|
<Button text="2nd" />
|
|
<Button text="3rd" />
|
|
</StackLayout>
|
|
</ActionBar.titleView>
|
|
</ActionBar>
|
|
</Page.actionBar>
|
|
...
|
|
</Page>
|
|
```
|
|
|
|
## Setting Action Items
|
|
```XML
|
|
<Page>
|
|
<Page.actionBar>
|
|
<ActionBar title="Title">
|
|
<ActionBar.actionItems>
|
|
<ActionItem text="left" ios.position="left"/>
|
|
<ActionItem text="right" ios.position="right"/>
|
|
<ActionItem text="pop" ios.position="right" android.position="popup"/>
|
|
</ActionBar.actionItems>
|
|
</ActionBar>
|
|
</Page.actionBar>
|
|
...
|
|
</Page>
|
|
```
|
|
|
|
The position option is platform-specific. The available values are as follows:
|
|
* **Android** - `actionBar`, `actionBarIfRoom` and `popup`. The default is `actionBar`.
|
|
* **iOS** - `left` and `right`. The default is `left`.
|
|
|
|
## Displaying Platform-Specific System Icons on Action Items
|
|
```XML
|
|
<Page>
|
|
<Page.actionBar>
|
|
<ActionBar>
|
|
<ActionBar.actionItems>
|
|
<ActionItem ios.systemIcon="12" android.systemIcon = "ic_menu_search" />
|
|
<ActionItem ios.systemIcon="15" android.systemIcon = "ic_menu_camera" />
|
|
<ActionItem ios.systemIcon="16" android.systemIcon = "ic_menu_delete" />
|
|
</ActionBar.actionItems>
|
|
</ActionBar>
|
|
</Page.actionBar>
|
|
...
|
|
</Page>
|
|
```
|
|
|
|
### iOS
|
|
Set `ios.systemIcon` to a number representing the iOS system item to be displayed.
|
|
Use this property instead of `ActionItem.icon` if you want to diplsay a built-in iOS system icon.
|
|
Note: systemIcon is not supported on NavigationButton in iOS
|
|
The value should be a number from the [UIBarButtonSystemItem](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/#//apple_ref/c/tdef/UIBarButtonSystemItem) enumeration:
|
|
0: `Done`
|
|
1: `Cancel`
|
|
2: `Edit`
|
|
3: `Save`
|
|
4: `Add`
|
|
5: `FlexibleSpace`
|
|
6: `FixedSpace`
|
|
7: `Compose`
|
|
8: `Reply`
|
|
9: `Action`
|
|
10: `Organize`
|
|
11: `Bookmarks`
|
|
12: `Search`
|
|
13: `Refresh`
|
|
14: `Stop`
|
|
15: `Camera`
|
|
16: `Trash`
|
|
17: `Play`
|
|
18: `Pause`
|
|
19: `Rewind`
|
|
20: `FastForward`
|
|
21: `Undo`
|
|
22: `Redo`
|
|
23: `PageCurl`
|
|
|
|
### Android
|
|
Set `android.systemIcon` the name of the system drawable resource to be displayed.
|
|
Use this property instead of `ActionItem.icon` if you want to diplsay a built-in Android system icon.
|
|
The value should be a string such as 'ic_menu_search' if you want to display the built-in Android Menu Search icon for example.
|
|
For a full list of Android drawable names, please visit http://androiddrawables.com
|
|
|
|
## Displaying Custom View in Action Items
|
|
```XML
|
|
<Page>
|
|
<Page.actionBar>
|
|
<ActionBar>
|
|
<ActionBar.actionItems>
|
|
<ActionItem>
|
|
<ActionItem.actionView>
|
|
<StackLayout orientation="horizontal">
|
|
<Label text="Green" color="green"/>
|
|
<Label text="Red" color="red"/>
|
|
</StackLayout>
|
|
</ActionItem.actionView>
|
|
</ActionItem>
|
|
</ActionBar.actionItems>
|
|
</ActionBar>
|
|
</Page.actionBar>
|
|
...
|
|
</Page>
|
|
```
|
|
|
|
## Setting Navigation Button
|
|
```XML
|
|
<Page>
|
|
<Page.actionBar>
|
|
<ActionBar title="Title">
|
|
<NavigationButton text="go back" android.systemIcon = "ic_menu_back"/>
|
|
</ActionBar>
|
|
...
|
|
</Page>
|
|
```
|
|
Setting `text` for the navigation button is not supported in Android. You can use `icon` or `android.systemIcon` to set the image in Android.
|
|
Setting `ios.systemIcon` for the navigation button is not supported in iOS.
|
|
|