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

tests: add tabs/bottom-navigation binding examples (#7437)

Browse Source
This commit is contained in:
Alexander Djenkov
2019-07-03 09:32:14 +03:00
committed by GitHub
parent ad54445083
commit 22e62daae5
9 changed files with 169 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
e2e/ui-tests-app/app/bottom-navigation/binding-page.ts Normal file
View File

@ -0,0 +1,12 @@
import * as vmModule from "./bottom-navigation-view-model";
var viewModel = vmModule.bottomNavigationViewModel;
export function bottomNavigaitonLoaded(args) {
let bottomNav = args.object;
bottomNav.bindingContext = viewModel;
}
export function addTabs(args) {
viewModel.createItems();
}

15
e2e/ui-tests-app/app/bottom-navigation/binding-page.xml Normal file
View File

@ -0,0 +1,15 @@
<Page class="page">
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
</ActionBar>
<GridLayout rows="auto,*">
<Button row="0" text="Add Tab" tap="addTabs"/>
<GridLayout row="1">
<BottomNavigation loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
<TabStrip items="{{ tabStripItems }}">
</TabStrip>
</BottomNavigation>
</GridLayout>
</GridLayout>
</Page>

7
e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml
View File

@ -31,6 +31,7 @@
<Label text="Places" />
</TabStripItem>
<TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
<TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
</TabStrip>
<TabContentItem>
@ -62,6 +63,12 @@
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
</BottomNavigation>

53
e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-view-model.ts Normal file
View File

@ -0,0 +1,53 @@
import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
import { Label } from "tns-core-modules/ui/label";
import { Observable } from "tns-core-modules/data/observable";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TabStripItem } from "tns-core-modules/ui/tab-navigation-base/tab-strip-item";
import { TabContentItem } from "tns-core-modules/ui/tab-navigation-base/tab-content-item";
export class BottomNavigationViewModel extends Observable {
private itemsCount: number = 1;
public tabStripItems = new Array<TabStripItem>();
public tabContentItems = new Array<TabContentItem>();
constructor() {
super();
this.createItems();
this.createItems();
}
createItems() {
const _tabStripItems = new Array<TabStripItem>();
const _tabContentItems = new Array<TabContentItem>();
for (let index = 0; index < this.itemsCount; index++) {
_tabStripItems.push(this.createTabStripItem(index));
_tabContentItems.push(this.createContentStripItem(index));
}
this.tabStripItems = _tabStripItems;
this.tabContentItems = _tabContentItems;
this.itemsCount++;
}
private createTabStripItem(index: number): TabStripItem {
const item = new TabStripItem();
item.title = "Item " + index;
item.iconSource = "res://icon";
return item;
}
private createContentStripItem(index: number): TabContentItem {
const contentItem = new TabContentItem();
const label = new Label();
const gridlayout = new GridLayout();
label.text = "Content Item " + index;
gridlayout.addChild(label);
contentItem.view = gridlayout;
return contentItem;
}
}
export var bottomNavigationViewModel = new BottomNavigationViewModel();

1
e2e/ui-tests-app/app/bottom-navigation/main-page.ts
View File

@ -17,6 +17,7 @@ export function loadExamples() {
examples.set("color", "bottom-navigation/color-page");
examples.set("icon-title-placement", "bottom-navigation/icon-title-placement-page");
examples.set("icon-change", "bottom-navigation/icon-change-page");
examples.set("binding", "bottom-navigation/binding-page");
return examples;
}

3
e2e/ui-tests-app/app/tabs/main-page.ts
View File

@ -18,7 +18,8 @@ export function loadExamples() {
examples.set("icon-title-placement", "tabs/icon-title-placement");
examples.set("icon-change", "tabs/icon-change");
examples.set("swipe-enabled", "tabs/swipe-enabled");
examples.set("tabs-position", "tabs/tabs-position");
examples.set("tabs-position", "tabs/tabs-position-page");
examples.set("tabs-binding", "tabs/tabs-binding-page");
return examples;
}

12
e2e/ui-tests-app/app/tabs/tabs-binding-page.ts Normal file
View File

@ -0,0 +1,12 @@
import * as vmModule from "./tabs-binding-view-model";
var viewModel = vmModule.tabsBindingNavigationViewModel;
export function tabsLoaded(args) {
let tabs = args.object;
tabs.bindingContext = viewModel;
}
export function addTabs(args) {
viewModel.createItems();
}

14
e2e/ui-tests-app/app/tabs/tabs-binding-page.xml Normal file
View File

@ -0,0 +1,14 @@
<Page class="page">
<ActionBar title="Tabs background-color" icon="" class="action-bar">
</ActionBar>
<GridLayout rows="auto,*">
<Button row="0" text="Add Tab" tap="addTabs"/>
<GridLayout row="1">
<Tabs loaded="tabsLoaded" items="{{ tabContentItems }}">
<TabStrip items="{{ tabStripItems }}"></TabStrip>
</Tabs>
</GridLayout>
</GridLayout>
</Page>

53
e2e/ui-tests-app/app/tabs/tabs-binding-view-model.ts Normal file
View File

@ -0,0 +1,53 @@
import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
import { Label } from "tns-core-modules/ui/label";
import { Observable } from "tns-core-modules/data/observable";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TabStripItem } from "tns-core-modules/ui/tab-navigation-base/tab-strip-item";
import { TabContentItem } from "tns-core-modules/ui/tab-navigation-base/tab-content-item";
export class TabsBindingNavigationViewModel extends Observable {
private itemsCount: number = 1;
public tabStripItems = new Array<TabStripItem>();
public tabContentItems = new Array<TabContentItem>();
constructor() {
super();
this.createItems();
this.createItems();
}
createItems() {
const _tabStripItems = new Array<TabStripItem>();
const _tabContentItems = new Array<TabContentItem>();
for (let index = 0; index < this.itemsCount; index++) {
_tabStripItems.push(this.createTabStripItem(index));
_tabContentItems.push(this.createContentStripItem(index));
}
this.tabStripItems = _tabStripItems;
this.tabContentItems = _tabContentItems;
this.itemsCount++;
}
private createTabStripItem(index: number): TabStripItem {
const item = new TabStripItem();
item.title = "Item " + index;
item.iconSource = "res://icon";
return item;
}
private createContentStripItem(index: number): TabContentItem {
const contentItem = new TabContentItem();
const label = new Label();
const gridlayout = new GridLayout();
label.text = "Content Item " + index;
gridlayout.addChild(label);
contentItem.view = gridlayout;
return contentItem;
}
}
export var tabsBindingNavigationViewModel = new TabsBindingNavigationViewModel();