javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 11:42:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

hiding cookbook/ui/action-bar article in favor of ui/action-bar (#5404)

Browse Source 
* hiding cookbook/ui/action-bar article in favor of ui/action-bar

* removing action-bar article from cookbook
This commit is contained in:
Nikolay Tsonev
2018-02-20 16:43:45 +02:00
committed by GitHub
parent 795940c224
commit 625d801014
1 changed files with 0 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
tests/app/ui/action-bar/action-bar.md
View File

@ -1,147 +0,0 @@
---
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.