ユーザーインターフェイスアクションバー

<ActionBar title="test">
	<StackLayout orientation="horizontal"
		ios:horizontalAlignment="center"
		android:horizontalAlignment="left">
		<Image src="res://nativescript_logo" class="action-image"></Image>
		<Label text="ativeScript"  class="action-label"></Label>
	</StackLayout>
</ActionBar>

.action-image {
	width: 40;
	height: 40;
	vertical-align: center;
}

.action-label {
	color: #3C5AFD;
	font-size: 24;
	font-weight: bold;
	vertical-align: center;
}

<ActionBar title="App Icon Demo">
	<NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="onNavBtnTap"/>
</ActionBar>

function onNavBtnTap() {
	// This code will be called only in Android.
	console.log("Navigation button tapped!");
}
exports.onNavBtnTap = onNavBtnTap;

export function onNavBtnTap(){
	// This code will be called only in Android.
	console.log("Navigation button tapped!");
}

<ActionBar title="Action Items">
	<ActionItem tap="onShare"
		ios.systemIcon="9" ios.position="left"
		android.systemIcon="ic_menu_share" android.position="actionBar"></ActionItem>
	<ActionItem tap="onDelete"
		ios.systemIcon="16" ios.position="right"
		text="delete" android.position="popup"></ActionItem>
</ActionBar>

function onShare(args) {
	console.log("Share action item tapped.");
}
exports.onShare = onShare;
function onDelete(args) {
	console.log("Delete action item tapped.");
}
exports.onDelete = onDelete;

export function onShare(args: observable.EventData) {
	console.log("Share action item tapped.");
}

export function onDelete(args: observable.EventData) {
	console.log("Delete action item tapped.");
}

<ActionBar title="Action Items Visibility">
	<ActionItem tap="onEdit" ios.systemIcon="2" android.systemIcon="ic_menu_edit" ios.position="right"
		visibility="{{ isEditing ? 'collapse' : 'visible' }}"/>
	<ActionItem tap="onSave" ios.systemIcon="3" android.systemIcon="ic_menu_save" ios.position="right"
		visibility="{{ isEditing ? 'visible' : 'collapse' }}"/>
	<ActionItem tap="onCancel"  ios.systemIcon="1" android.systemIcon="ic_menu_close_clear_cancel"
		visibility="{{ isEditing ? 'visible' : 'collapse' }}"/>
</ActionBar>

var observable = require("tns-core-modules/data/observable");
function onLoaded(args) {
	var page = args.object;
	page.bindingContext = new observable.Observable();
	page.bindingContext.set("isEditing", false);
}
exports.onLoaded = onLoaded;
function onEdit(args) {
	console.log("Edit item tapped.");
	var btn = args.object;
	btn.bindingContext.set("isEditing", true);
}
exports.onEdit = onEdit;
function onSave(args) {
	console.log("Save item tapped.");
	var btn = args.object;
	btn.bindingContext.set("isEditing", false);
}
exports.onSave = onSave;
function onCancel(args) {
	console.log("Cancel item tapped.");
	var btn = args.object;
	btn.bindingContext.set("isEditing", false);
}
exports.onCancel = onCancel;

import { EventData, Observable } from "tns-core-modules/data/observable";
import { View } from "tns-core-modules/ui/core/view";

export function onLoaded(args: EventData) {
	let page = <View>args.object;
	page.bindingContext = new Observable();
	page.bindingContext.set("isEditing", false);
}

export function onEdit(args: observable.EventData) {
	console.log("Edit item tapped.");
	let btn = <view.View>args.object;
	btn.bindingContext.set("isEditing", true);
}

export function onSave(args: observable.EventData) {
	console.log("Save item tapped.");
	let btn = <view.View>args.object;
	btn.bindingContext.set("isEditing", false);
}

export function onCancel(args: observable.EventData) {
	console.log("Cancel item tapped.");
	let btn = <view.View>args.object;
	btn.bindingContext.set("isEditing", false);
}

<ActionBar title="ActionBar Style">
	<NavigationButton text="Go Back" android.systemIcon="ic_menu_back"></NavigationButton>
	<ActionItem ios.systemIcon="2" android.systemIcon="ic_menu_edit" ios.position="right"></ActionItem>
</ActionBar>

ActionBar {
	background-color:  #3C5AFD;
	color: white;
}

<ActionBar title="SideDrawer Button">
	<android>
		<NavigationButton icon="res://ic_menu" tap="showSideDrawer" />
	</android>
	<ios>
		<ActionItem icon="res://ic_menu" ios.position="left" tap="showSideDrawer" />
	</ios>
</ActionBar>

function showSideDrawer(args) {
	console.log("Show SideDrawer tapped.");
	// Show sidedrawer ...
}
exports.showSideDrawer = showSideDrawer;

export function showSideDrawer(args: observable.EventData) {
	console.log("Show SideDrawer tapped.");
	// Show sidedrawer ...
}

ActionBar {
	background-color:  #3C5AFD;
	color: white;
}