mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
f15f283c74
Needed to have a nice structured cookbook dir in the docs Includes: Move the data-module tests under the data dir Move the frame tests under the ui dir Rename the dialog.md file to dialogs.md Fix the web-view title Add previous_url attributes to each article for SEO Rename the style dir to styling to match the reference Fix the frame-tests path
148 lines
4.0 KiB
Markdown
148 lines
4.0 KiB
Markdown
---
|
|
nav-title: "ActionBar How-To"
|
|
title: "action-bar"
|
|
description: "Examples for using ActionBar"
|
|
previous_url: /ApiReference/ui/action-bar/HOW-TO
|
|
---
|
|
# ActionBar
|
|
Using a ActionBar requires the action-bar module.
|
|
<snippet id='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` enumeration
|
|
(https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/#//apple_ref/c/tdef/UIBarButtonSystemItem)
|
|
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.
|
|
|