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

Merge pull request #443 from NativeScript/feature/action-bar-docs

Browse Source 
ActionBar: Docs and snippets
This commit is contained in:
Alexander Vakrilov
2015-07-16 10:38:37 +03:00
parent 7adeb29ace 8c62b01fa5
commit 4b594559a5
4 changed files with 191 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,10 +2,79 @@
import LabelModule = require("ui/label");
import helper = require("../helper");
import builder = require("ui/builder");
import actionBar = require("ui/action-bar");
import button = require("ui/button");
import PageModule = require("ui/page");
// <snippet module="ui/action-bar" title="ActionBar">
// # ActionBar
// Using a ActionBar requires the action-bar module.
// ``` JavaScript
import actionBarModule = require("ui/action-bar");
// ```
//
// ## Setting Title and Icon
//```XML
// <Page>
// <Page.actionBar>
// {%raw%}<ActionBar title="{{ title }}" android.icon="res://ic_test"/>{%endraw%}
// </Page.actionBar>
// ...
// </Page>
//```
//The icon can only be set in Android platform. Following the design guides it is automatically hidden in Lollipop versions (API level >= 20). 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`.
//
// ## Setting Navigation Button
//```XML
// <Page>
// <Page.actionBar>
// <ActionBar title="Title">
// <NavigationButton text="go back"/>
// </ActionBar>
// ...
// </Page>
//```
//
// </snippet>
export function test_actionItem_inherit_bindingContext() {
var page: PageModule.Page;
var label: LabelModule.Label;
@@ -14,7 +83,7 @@ export function test_actionItem_inherit_bindingContext() {
var pageFactory = function (): PageModule.Page {
page = new PageModule.Page();
page.bindingContext = context;
var actionItem = new actionBar.ActionItem();
var actionItem = new actionBarModule.ActionItem();
actionItem.bind({
sourceProperty: "text",
@@ -110,7 +179,7 @@ export function test_Setting_ActionItems_doesnt_thrown() {
var pageFactory = function (): PageModule.Page {
page = new PageModule.Page();
var actionItem = new actionBar.ActionItem();
var actionItem = new actionBarModule.ActionItem();
actionItem.text = "Item";
page.actionBar.actionItems.addItem(actionItem);

2
ui/action-bar/action-bar-common.ts
View File

@@ -158,7 +158,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
}
}
public shouldShow(): boolean {
public _shouldShow(): boolean {
if (this.title ||
(this.android && this.android.icon) ||
this.navigationButton ||

125
ui/action-bar/action-bar.d.ts vendored
View File

@@ -1,42 +1,94 @@
declare module "ui/action-bar" {
/**
* Contains the action bar related classes.
*/
declare module "ui/action-bar" {
import observable = require("data/observable");
import view = require("ui/core/view");
import dependencyObservable = require("ui/core/dependency-observable");
import bindable = require("ui/core/bindable");
import pages = require("ui/page");
/**
* Provides an abstraction over the ActionBar (android) and NavigationBar (iOS).
*/
export class ActionBar extends view.View implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
/**
* Gets or sets the action bar title.
*/
title: string;
navigationButton: NavigationButton;
actionItems: ActionItems;
/**
* Gets or sets the title view. When set - replaces the title with a custom view.
*/
titleView: view.View;
/**
* Gets or sets the navigation button (a.k.a. the back button).
*/
navigationButton: NavigationButton;
/**
* Gets the collection of action items.
*/
actionItems: ActionItems;
/**
* Gets the android specific options of the action bar.
*/
android: AndroidActionBarSettings;
/**
* Gets the page that contains the action bar.
*/
page: pages.Page;
shouldShow(): boolean
/**
* Updates the action bar.
*/
update();
//@private
_shouldShow(): boolean
_updateAndroid(menu: android.view.IMenu);
_onAndroidItemSelected(itemId: number): boolean
_addArrayFromBuilder(name: string, value: Array<any>): void;
_addChildFromBuilder(name: string, value: any): void;
//@endprivate
}
/**
* Represents a collection of ActionItems.
*/
export class ActionItems {
/**
* Adds an item to the collection.
* @param item - the item to be added
*/
addItem(item: ActionItem): void;
/**
* Removes an item to the collection.
* @param item - The item to be removed.
*/
removeItem(item: ActionItem): void;
/**
* Gets an array of the current action items in the collection.
*/
getItems(): Array<ActionItem>;
/**
* Gets an item at a specified index.
* @param index - The index.
*/
getItemAt(index: number): ActionItem;
}
/**
* Base class for action items.
*/
export class ActionItemBase extends bindable.Bindable {
/**
* String value used when hooking to tap event.
@@ -53,8 +105,19 @@
*/
public static iconProperty: dependencyObservable.Property;
/**
* Gets or sets the text of the action item.
*/
text: string;
/**
* Gets or sets the icon of the action item.
*/
icon: string;
/**
* Gets the action bar that contains the action item.
*/
actionBar: ActionBar;
/**
@@ -75,24 +138,70 @@
//@endprivate
}
/**
* Represents an action item in the action bar.
*/
export class ActionItem extends ActionItemBase {
/**
* Gets the iOS specific options of the action item.
*/
ios: IOSActionItemSettings;
/**
* Gets the Android specific options of the action item.
*/
android: AndroidActionItemSettings;
}
/**
* Represents Android specific options of the action item.
*/
export interface AndroidActionItemSettings {
/**
* Gets or sets the position of the action item in the action bar.
* 1. actionBar - item is shown in the action bar.
* 2. actionBarIfRoom - item is shown in the action bar if there is room for it. Otherwise it is put in the popup menu.
* 3. popup - item is shown in the popup menu.
*/
position: string;
}
/**
* Represents iOS specific options of the action item.
*/
export interface IOSActionItemSettings {
/**
* Gets or sets the position of the action item in the action bar.
* 1. left - items is shown at the left part of the navigation bar. This is the default value.
* 2. right - items is shown at the right part of the navigation bar.
*/
position: string;
}
/**
* Represents Android specific options of the action bar.
*/
export interface AndroidActionBarSettings {
/**
* Gets or sets the action bar icon.
*/
icon: string;
/**
* Gets or sets the visibility of the action bar icon.
* The icon is visible by default in pre-lollipop (API level < 20) versions of android and is hidden in lollipop (API level >= 20)
* The possible values are:
* 1. auto - the default behavior. This is the default value.
* 2. always - the icon is aways shown.
* 3. never - the icon is aways hidden.
*/
iconVisibility: string;
}
/**
* Represents the navigation (a.k.a. "back") button.
*/
export class NavigationButton extends ActionItemBase {
}

2
ui/frame/frame.ios.ts
View File

@@ -84,7 +84,7 @@ export class Frame extends frameCommon.Frame {
case enums.NavigationBarVisibility.auto:
var pageInstance: pages.Page = page || this.currentPage;
newValue = this.backStack.length > 0 || (pageInstance && pageInstance.actionBar.shouldShow());
newValue = this.backStack.length > 0 || (pageInstance && pageInstance.actionBar._shouldShow());
newValue = !!newValue; // Make sure it is boolean
break;
}