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

how-tos made with markdown snippet injector

Browse Source
This commit is contained in:
Nikolay Iliev
2016-04-14 15:20:35 +03:00
parent 5ceeb7fddd
commit 89fad4f41c
43 changed files with 1207 additions and 1116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
apps/tests/ui/action-bar/action-bar-tests-common.ts
View File

@@ -8,151 +8,9 @@ import viewModule = require("ui/core/view");
import fs = require("file-system");
import { Observable } from "data/observable";
// <snippet module="ui/action-bar" title="ActionBar">
// # ActionBar
// Using a ActionBar requires the action-bar module.
// ``` JavaScript
// >> actionbar-common-require
import actionBarModule = require("ui/action-bar");
// ```
//
// ## 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.
//
// </snippet>
// << actionbar-common-require
export function test_actionItem_inherit_bindingContext() {
var page: PageModule.Page;

146
apps/tests/ui/action-bar/action-bar.md Normal file
View File

@@ -0,0 +1,146 @@
---
nav-title: "ActionBar How-To"
title: "How-To"
description: "Examples for using ActionBar"
---
# 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.

32
apps/tests/ui/activity-indicator/activity-indicator.md Normal file
View File

@@ -0,0 +1,32 @@
---
nav-title: "activity-indicator How-To"
title: "How-To"
description: "Examples for using activity-indicator"
---
# ActivityIndicator
Using the activity indicator requires the ActivityIndicator module.
``` JavaScript
var activityIndicatorModule = require("ui/activity-indicator");
```
### Binding the activity indicator busy property to a view-model property.
``` XML
<Page>
{%raw%}<ActivityIndicator busy="{{ isLoading }}" />{%endraw%}
</Page>
```
### Creating an activity indicator
``` JavaScript
var indicator = new activityIndicatorModule.ActivityIndicator();
```
### Showing activity indicator while image is loading
``` JavaScript
var image = new imageModule.Image();
var indicator = new activityIndicatorModule.ActivityIndicator();
indicator.width = 100;
indicator.height = 100;
// Bind the busy property of the indicator to the isLoading property of the image
indicator.bind({
sourceProperty: "isLoading",
targetProperty: "busy"
}, image);
```