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

finish removal of Tabs component

Browse Source
This commit is contained in:
Martin Guillon
2020-09-12 15:18:08 +02:00
parent cdad0cf16f
commit 5a3b9d5e16
67 changed files with 4 additions and 2881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/ui/src/bottom-navigation/events-page.ts
View File

@@ -1,25 +1,25 @@
import { EventData } from '@nativescript/core/data/observable';
import { Page } from '@nativescript/core/ui/page';
import { Tabs, SelectedIndexChangedEventData } from '@nativescript/core/ui/tabs';
import { BottomNavigation, SelectedIndexChangedEventData } from '@nativescript/core/ui/bottom-navigation';
export function goToFirst(args: EventData) {
console.log('---> goToFirst');
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById('bottomNav');
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
console.log('---> goToSecond');
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById('bottomNav');
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
console.log('---> goToThird');
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById('bottomNav');
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 2;
}

1
apps/ui/src/main-page.ts
View File

@@ -12,7 +12,6 @@ export function pageLoaded(args: EventData) {
examples.set('action-bar', 'action-bar/main-page');
examples.set('bindings', 'bindings/main-page');
examples.set('bottom-navigation', 'bottom-navigation/main-page');
examples.set('tabs', 'tabs/main-page');
examples.set('button', 'button/main-page');
examples.set('css', 'css/main-page');
examples.set('dialogs', 'dialogs/main-page');

19
apps/ui/src/tabs/background-color-page.css
View File

@@ -1,19 +0,0 @@
Tabs {
background-color: gold;
}
TabContentItem.special {
background-color: olive;
}
TabStrip {
background-color: skyblue;
}
TabStripItem.special {
background-color: teal;
}
TabStripItem.special:active {
background-color: yellowgreen;
}

24
apps/ui/src/tabs/background-color-page.xml
View File

@@ -1,24 +0,0 @@
<Page class="page">
<ActionBar title="Tabs background-color" icon="" class="action-bar">
</ActionBar>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>

27
apps/ui/src/tabs/color-page.css
View File

@@ -1,27 +0,0 @@
Tabs {
color: gold;
}
TabContentItem.special {
color: green;
}
TabStrip {
color: skyblue;
}
TabStripItem.special {
color: teal;
}
TabStripItem.special:active {
color: yellowgreen;
}
TabStripItem.nested Label {
color: teal;
}
TabStripItem.nested:active Label {
color: yellowgreen;
}

33
apps/ui/src/tabs/color-page.xml
View File

@@ -1,33 +0,0 @@
<Page class="page">
<ActionBar title="Tabs color" class="action-bar">
</ActionBar>
<Tabs automationText="tabNavigation">
<TabStrip>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>

31
apps/ui/src/tabs/custom-tabstrip-page.css
View File

@@ -1,31 +0,0 @@
.custom-tabstrip {
height: 100;
vertical-align: bottom;
ios-overflow-safe-area-enabled: false;
}
.custom-tabstripitem {
height: 80;
width: 80;
vertical-align: center;
horizontal-align: center;
clip-path: circle(100% at 50% 50%);
}
.custom-title {
color: white;
vertical-align: center;
horizontal-align: center;
}
.skyblue {
background-color: skyblue;
}
.gold {
background-color: gold;
}
.olive {
background-color: olive;
}

22
apps/ui/src/tabs/custom-tabstrip-page.ts
View File

@@ -1,22 +0,0 @@
import { EventData, Page, Tabs } from '@nativescript/core';
export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById('tabsNav');
bottomNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById('tabsNav');
bottomNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById('tabsNav');
bottomNav.selectedIndex = 2;
}

41
apps/ui/src/tabs/custom-tabstrip-page.xml
View File

@@ -1,41 +0,0 @@
<Page>
<ActionBar title="Tabs Custom TabStrip" icon="" class="action-bar">
</ActionBar>
<GridLayout>
<GridLayout>
<Tabs id="tabsNav" automationText="tabNavigation" >
<TabContentItem>
<GridLayout backgroundColor="skyblue">
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="gold">
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="olive">
<Label text="Third View"/>
</GridLayout>
</TabContentItem>
</Tabs>
</GridLayout>
<GridLayout columns="*, *, *" class="custom-tabstrip">
<GridLayout automationText="first-tab" col="0" class="custom-tabstripitem skyblue" tap="goToFirst">
<Label text="First" class="custom-title"></Label>
</GridLayout>
<GridLayout automationText="second-tab" col="1" class="custom-tabstripitem gold" tap="goToSecond">
<Label text="Second" class="custom-title"></Label>
</GridLayout>
<GridLayout automationText="third-tab" col="2" class="custom-tabstripitem olive" tap="goToThird">
<Label text="Third" class="custom-title"></Label>
</GridLayout>
</GridLayout>
</GridLayout>
</Page>

15
apps/ui/src/tabs/default-page.ts
View File

@@ -1,15 +0,0 @@
import { EventData, Page, Tabs } from '@nativescript/core';
export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabsNav');
tabsNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabsNav');
tabsNav.selectedIndex = 1;
}

89
apps/ui/src/tabs/default-page.xml
View File

@@ -1,89 +0,0 @@
<Page>
<ActionBar title="Tabs" icon="" class="action-bar">
</ActionBar>
<!-- w/o TabStrip -->
<!-- <BottomNavigation>
<TabContentItem>
<GridLayout>
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
</BottomNavigation> -->
<!-- w/ TabStrip -->
<Tabs id="tabsNav" automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="News" />
</TabStripItem>
<!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="Places" />
</TabStripItem>
<!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
</TabStrip>
<TabContentItem>
<StackLayout backgroundColor="blue">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="red">
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="green">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<!-- <TabContentItem>
<StackLayout>
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem> -->
</Tabs>
<!-- =============================================================================================== -->
<!-- Bottom Bar with TabStrip -->
<!-- <BottomNavigationBar>
<TabStrip>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</TabStrip>
</BottomNavigationBar> -->
<!-- Bottom Bar w/o TabStrip -->
<!-- <BottomNavigationBar>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</BottomNavigationBar> -->
</Page>

28
apps/ui/src/tabs/dynamic-color-change-page.css
View File

@@ -1,28 +0,0 @@
.font-awesome {
font-family: "FontAwesome";
}
.font-size {
font-size: 36;
}
TabStripItem:active {
background-color: magenta;
}
.tabsClass0 {
}
.tabsClass1 {
background-color: #79d2a6;
highlight-color: green;
selected-item-color: yellow;
un-selected-item-color: blue;
}
.tabsClass2 {
background-color: orangered;
highlight-color: lightgreen;
selected-item-color: whitesmoke;
un-selected-item-color: pink;
}

37
apps/ui/src/tabs/dynamic-color-change-page.ts
View File

@@ -1,37 +0,0 @@
import { View, Page, Tabs } from '@nativescript/core';
export function onButtonTap(args) {
const page = <Page>(<View>args.object).page;
const tabs = <Tabs>page.getViewById('tabs');
switch (tabs.tabStrip.className) {
case 'tabsClass0':
tabs.tabStrip.className = 'tabsClass1';
break;
case 'tabsClass1':
tabs.tabStrip.className = 'tabsClass2';
break;
case 'tabsClass2':
tabs.tabStrip.className = 'tabsClass0';
break;
}
}
export function onChangeIconSourceTap(args) {
const page = <Page>(<View>args.object).page;
const tabs = <Tabs>page.getViewById('tabs');
const tabStripItem0 = tabs.tabStrip.items[0];
const tabStripItem1 = tabs.tabStrip.items[1];
const tabStripItem2 = tabs.tabStrip.items[2];
const iconSource0 = tabStripItem0.iconSource;
tabStripItem0.iconSource = tabStripItem1.iconSource;
tabStripItem1.iconClass = 'font-awesome font-size';
tabStripItem1.iconSource = tabStripItem2.iconSource;
tabStripItem2.iconClass = 'font-awesome font-size';
tabStripItem2.iconSource = iconSource0;
}

44
apps/ui/src/tabs/dynamic-color-change-page.xml
View File

@@ -1,44 +0,0 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<GridLayout rows="auto,*">
<StackLayout row="0" >
<Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
<Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
</StackLayout>
<GridLayout row="1">
<Tabs automationText="tabNavigation" id="tabs" >
<TabStrip class="tabsClass0">
<TabStripItem>
<Label text="Home"></Label>
<Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Favorites"></Label>
<Image src="res://add_to_fav"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Up"></Label>
<Image src="res://up"></Image>
</TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Favorites Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Up Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
</Tabs>
</GridLayout>
</GridLayout>
</Page>

40
apps/ui/src/tabs/events-page.ts
View File

@@ -1,40 +0,0 @@
import { EventData, Page, Tabs, SelectedIndexChangedEventData } from '@nativescript/core';
export function goToFirst(args: EventData) {
console.log('---> goToFirst');
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabsNav');
tabsNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
console.log('---> goToSecond');
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabsNav');
tabsNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
console.log('---> goToThird');
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabsNav');
tabsNav.selectedIndex = 2;
}
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
console.log('---> onSelectedIndexChanged', args.eventName);
console.log('---> oldIndex', args.oldIndex);
console.log('---> newIndex', args.newIndex);
}
export function onFirstTabStripItemTap(args: EventData) {
console.log('---> onFirstTabStripItemTap', args.eventName);
}
export function onSecondTabStripItemTap(args: EventData) {
console.log('---> onSecondTabStripItemTap', args.eventName);
}
export function onThirdTabStripItemTap(args: EventData) {
console.log('---> onThirdTabStripItemTap', args.eventName);
}

36
apps/ui/src/tabs/events-page.xml
View File

@@ -1,36 +0,0 @@
<Page>
<Tabs id="tabsNav" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip>
<TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
<TabStripItem tap="onSecondTabStripItemTap">
<Label text="Second" />
</TabStripItem>
<TabStripItem title="First" tap="onThirdTabStripItemTap">
<Label text="Third" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="red" />
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second View" backgroundColor="green" />
<Button tap="goToThird" text="go to thrid" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="blue" />
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
</Tabs>
</Page>

13
apps/ui/src/tabs/first-page.ts
View File

@@ -1,13 +0,0 @@
import { EventData, Button } from '@nativescript/core';
export function goToSecond(args: EventData) {
console.log('---> goToSecond Page');
const button = <Button>args.object;
button.page.frame.navigate('tabs/second-page');
}
export function goBack(args: EventData) {
console.log('---> goBack');
const button = <Button>args.object;
button.page.frame.goBack();
}

7
apps/ui/src/tabs/first-page.xml
View File

@@ -1,7 +0,0 @@
<Page backgroundColor="lightgreen" actionBarHidden="true">
<StackLayout>
<Label text="First Page" />
<Button tap="goToSecond" text="go to second page" />
<Button tap="goBack" text="go to back" />
</StackLayout>
</Page>

39
apps/ui/src/tabs/font-icons-page.css
View File

@@ -1,39 +0,0 @@
.font-awesome {
font-family: "FontAwesome";
}
.font-size {
font-size: 36;
}
TabStrip {
color: mediumvioletred;
}
TabStripItem {
color: skyblue;
}
TabStripItem:active {
color: darkblue;
}
TabStripItem.special Image {
color: lightgreen;
}
TabStripItem.special:active Image {
color: darkgreen;
}
TabStripItem.special Label {
color: gold;
}
TabStripItem.special:active Label {
color: darkgoldenrod;
}
TabStripItem:active .font-size {
font-size: 10;
}

63
apps/ui/src/tabs/font-icons-page.xml
View File

@@ -1,63 +0,0 @@
<Page class="page">
<ActionBar title="Tabs font icons" icon="" class="action-bar">
</ActionBar>
<Tabs automationText="tabNavigation">
<TabStrip>
<!-- font family + font size + color -->
<TabStripItem class="special">
<Label text="All Set"/>
<Image src="font://&#xF10B;" class="font-awesome font-size" />
</TabStripItem>
<!-- default font + valid char code -->
<TabStripItem>
<Label text="Invalid Font" />
<Image src="font://&#xF10B;" />
</TabStripItem>
<!-- font family + invalid char code -->
<TabStripItem>
<Label text="Invalid Char" />
<Image src="font://&#xF556;" class="font-awesome font-size"/>
</TabStripItem>
</TabStrip>
<TabContentItem class="special">
<StackLayout>
<Label text="char code: phone" />
<Label text="font: Font Awesome" />
<Label text="font size: 36" />
<Label text="icon color inactive: lightgreen" />
<Label text="icon color active: darkgreen" />
<Label text="title color inactive: gold" />
<Label text="title color active: darkgoldenrod" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="char code: phone" />
<Label text="font: default/invalid" />
<Label text="font size: default" />
<Label text="icon color inactive: skyblue" />
<Label text="icon color active: darkblue" />
<Label text="title color inactive: skyblue" />
<Label text="title color active: darkblue" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="char code: invalid" />
<Label text="font: Font Awesome" />
<Label text="font size: 36" />
<Label text="icon color inactive: skyblue" />
<Label text="icon color active: darkblue" />
<Label text="title color inactive: skyblue" />
<Label text="title color active: darkblue" />
</StackLayout>
</TabContentItem>
</Tabs>
</Page>

27
apps/ui/src/tabs/font-page.css
View File

@@ -1,27 +0,0 @@
Tabs {
font: 24 'Times New Roman', Times, serif;
}
TabContentItem.special {
font: italic bold 12 Georgia, serif;
}
TabStrip {
font: 15 arial, sans-serif;
}
TabStripItem.special {
font: 12 monospace;
}
TabStripItem.special:active {
font: 16 monospace;
}
TabStripItem.nested Label {
font: 12 monospace;
}
TabStripItem.nested:active Label {
font: 16 monospace;
}

33
apps/ui/src/tabs/font-page.xml
View File

@@ -1,33 +0,0 @@
<Page class="page">
<ActionBar title="Tabs font" class="action-bar">
</ActionBar>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>

3
apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml
View File

@@ -1,3 +0,0 @@
<Page class="page" >
<Label text="Inner label 1" backgroundColor="blue"/>
</Page>

3
apps/ui/src/tabs/frame-in-tabs-inner-page-2.xml
View File

@@ -1,3 +0,0 @@
<Page class="page">
<Label text="Inner label 2" backgroundColor="red"/>
</Page>

3
apps/ui/src/tabs/frame-in-tabs-inner-page-3.xml
View File

@@ -1,3 +0,0 @@
<Page class="page">
<Label text="Inner label 3" backgroundColor="orange"/>
</Page>

3
apps/ui/src/tabs/frame-in-tabs-inner-page-4.xml
View File

@@ -1,3 +0,0 @@
<Page class="page">
<Label text="Inner label 4" backgroundColor="green"/>
</Page>

3
apps/ui/src/tabs/frame-in-tabs.ts
View File

@@ -1,3 +0,0 @@
export function onItemTap(args) {
console.log(`Item with index: ${args.index} tapped`);
}

24
apps/ui/src/tabs/frame-in-tabs.xml
View File

@@ -1,24 +0,0 @@
<Page class="page">
<StackLayout>
<Tabs highlightColor="red" offscreenTabLimit="1" automationText="tabNavigation">
<TabStrip highlightColor="green" itemTap="onItemTap">
<TabStripItem title="1"></TabStripItem>
<TabStripItem title="2"></TabStripItem>
<TabStripItem title="3"></TabStripItem>
<TabStripItem title="4"></TabStripItem>
</TabStrip>
<TabContentItem>
<Frame defaultPage="tabs/frame-in-tabs-inner-page-1"></Frame>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="tabs/frame-in-tabs-inner-page-2"></Frame>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="tabs/frame-in-tabs-inner-page-3"></Frame>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="tabs/frame-in-tabs-inner-page-4"></Frame>
</TabContentItem>
</Tabs>
</StackLayout>
</Page>

3
apps/ui/src/tabs/highlight-color-page.css
View File

@@ -1,3 +0,0 @@
TabStrip {
highlight-color: crimson;
}

24
apps/ui/src/tabs/highlight-color-page.xml
View File

@@ -1,24 +0,0 @@
<Page class="page">
<ActionBar title="Tabs highlight-color" icon="" class="action-bar">
</ActionBar>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>

17
apps/ui/src/tabs/icon-change-page.ts
View File

@@ -1,17 +0,0 @@
import { Tabs, SelectedIndexChangedEventData } from '@nativescript/core';
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const tabsNav = <Tabs>args.object;
const newItem = tabsNav.tabStrip.items[args.newIndex];
if (newItem) {
newItem.iconSource = 'res://icon';
newItem.title = 'selected';
}
const oldItem = tabsNav.tabStrip.items[args.oldIndex];
if (oldItem) {
oldItem.iconSource = 'res://testlogo';
oldItem.title = 'unselected';
}
}

23
apps/ui/src/tabs/icon-change-page.xml
View File

@@ -1,23 +0,0 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<ActionBar title="Tabs icon change" icon="" class="action-bar">
</ActionBar>
<Tabs id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" >
<TabStrip>
<TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
<TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="first tab"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="second tab"/>
</GridLayout>
</TabContentItem>
</Tabs>
</Page>

30
apps/ui/src/tabs/icon-title-placement-page.xml
View File

@@ -1,30 +0,0 @@
<Page class="page">
<ActionBar title="Tabs icon title placement" icon="" class="action-bar">
</ActionBar>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem title="Title"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="Title and icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only title" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>

27
apps/ui/src/tabs/issue-5470-page.xml
View File

@@ -1,27 +0,0 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
<ActionBar title="Tabs issue 5470" icon="" class="action-bar">
</ActionBar>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="Tab1"></TabStripItem>
<TabStripItem title="Tab2"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout rows="*, auto" columns="*">
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
<StackLayout row="1" backgroundColor="green" height="50"></StackLayout>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout rows="*, auto" columns="*">
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
<StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
</GridLayout>
</TabContentItem>
</Tabs>
</Page>

20
apps/ui/src/tabs/item-color-page.css
View File

@@ -1,20 +0,0 @@
.font-awesome {
font-family: "FontAwesome";
}
.font-size {
font-size: 36;
}
/* TabStrip {
color: mediumvioletred;
}
TabStripItem {
color: skyblue;
}
TabStripItem:active {
color: darkblue;
} */

40
apps/ui/src/tabs/item-color-page.xml
View File

@@ -1,40 +0,0 @@
<Page class="page">
<ActionBar title="Tabs item-color" icon="" class="action-bar">
</ActionBar>
<Tabs automationText="tabNavigation">
<TabStrip selectedItemColor="red" unSelectedItemColor="green">
<TabStripItem>
<Label text="First"/>
<Image src="res://baseline_motorcycle_black_24"/>
</TabStripItem>
<TabStripItem>
<Label text="Second"/>
<Image src="res://up"/>
</TabStripItem>
<TabStripItem>
<Label text="Third"/>
<Image src="font://&#xF10B;" class="font-awesome font-size" />
</TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>

38
apps/ui/src/tabs/main-page.ts
View File

@@ -1,38 +0,0 @@
import { EventData, WrapLayout, Page } from '@nativescript/core';
import { SubMainPageViewModel } from '../sub-main-page-view-model';
export function pageLoaded(args: EventData) {
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById('wrapLayoutWithExamples');
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}
export function loadExamples() {
const examples = new Map<string, string>();
examples.set('tabs', 'tabs/tabs-page');
examples.set('issue-5470', 'tabs/issue-5470-page');
examples.set('background-color', 'tabs/background-color-page');
examples.set('color', 'tabs/color-page');
examples.set('events', 'tabs/events-page');
examples.set('font', 'tabs/font-page');
examples.set('text-transform', 'tabs/text-transform-page');
examples.set('highlight-color', 'tabs/highlight-color-page');
examples.set('icon-title-placement', 'tabs/icon-title-placement-page');
examples.set('icon-change', 'tabs/icon-change-page');
examples.set('swipe-disabled', 'tabs/swipe-disabled-page');
examples.set('strip-item', 'tabs/tab-strip-item-page');
examples.set('strip-items', 'tabs/tab-strip-items-page');
examples.set('reselect', 'tabs/reselect-page');
examples.set('tabs-position', 'tabs/tabs-position-page');
examples.set('tabs-binding', 'tabs/tabs-binding-page');
examples.set('font-icons', 'tabs/font-icons-page');
examples.set('nested-layout', 'tabs/nested-layout-page');
examples.set('nested-bottom-navigation', 'tabs/nested-bottom-navigation-page');
examples.set('custom-tabstrip', 'tabs/custom-tabstrip-page');
examples.set('frame-in-tabs', 'tabs/frame-in-tabs');
examples.set('item-color', 'tabs/item-color-page');
examples.set('dynamic-color-change', 'tabs/dynamic-color-change-page');
return examples;
}

6
apps/ui/src/tabs/main-page.xml
View File

@@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Page loaded="pageLoaded">
<ScrollView orientation="vertical" row="1">
<WrapLayout id="wrapLayoutWithExamples"/>
</ScrollView>
</Page>

39
apps/ui/src/tabs/nested-bottom-navigation-page.xml
View File

@@ -1,39 +0,0 @@
<Page class="page">
<ActionBar title="Tabs nested in Layout" icon="" class="action-bar">
</ActionBar>
<BottomNavigation>
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<Tabs>
<TabStrip backgroundColor="palevioletred">
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout backgroundColor="skyblue">
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="gold">
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</Tabs>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

26
apps/ui/src/tabs/nested-layout-page.xml
View File

@@ -1,26 +0,0 @@
<Page class="page">
<ActionBar title="Tabs nested in Layout" icon="" class="action-bar">
</ActionBar>
<GridLayout>
<Tabs>
<TabStrip backgroundColor="palevioletred">
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout backgroundColor="skyblue">
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="gold">
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</Tabs>
</GridLayout>
</Page>

68
apps/ui/src/tabs/reselect-page.ts
View File

@@ -1,68 +0,0 @@
import { EventData, Frame, Page, TabStripItemEventData, SelectedIndexChangedEventData, Tabs, TabStrip } from '@nativescript/core';
export function goToFirst(args: EventData) {
console.log('---> goToFirst');
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabsNav');
tabsNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
console.log('---> goToSecond');
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabsNav');
tabsNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
console.log('---> goToThird');
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabsNav');
tabsNav.selectedIndex = 2;
}
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
console.log('---> onSelectedIndexChanged', args.eventName);
console.log('---> oldIndex', args.oldIndex);
console.log('---> newIndex', args.newIndex);
}
export function onItemTap(args: TabStripItemEventData) {
console.log('---> onItemTap', args.eventName);
console.log('---> onItemTap', args.index);
console.log('---> onItemTap', args.object);
const tabStrip = <TabStrip>args.object;
const page = <Page>tabStrip.page;
const frame = <Frame>page.getViewById('frame');
const tabs = <Tabs>page.getViewById('tabsNav');
console.log('---> onItemTap selectedIndex', tabs.selectedIndex);
if (tabs.selectedIndex === args.index && frame.canGoBack()) {
frame.goBack();
}
}
export function onFirstTabStripItemTap(args: EventData) {
console.log('---> onFirstTabStripItemTap', args.eventName);
// console.log("---> onFirstTabStripItemTap", args.eventName);
// console.log("---> onFirstTabStripItemTap", args.object);
// const tabStripItem = <TabStripItem>args.object;
// const page = tabStripItem.page;
// const frame = <Frame>page.getViewById("frame");
// const tabs = <Tabs>page.getViewById("tabsNav");
// console.log("---> tabs.selectedIndex", tabs.selectedIndex);
// if (tabs.selectedIndex === 0 && frame.canGoBack()) {
// frame.goBack();
// }
}
export function onSecondTabStripItemTap(args: EventData) {
console.log('---> onSecondTabStripItemTap', args.eventName);
}
export function onThirdTabStripItemTap(args: EventData) {
console.log('---> onThirdTabStripItemTap', args.eventName);
}

37
apps/ui/src/tabs/reselect-page.xml
View File

@@ -1,37 +0,0 @@
<Page>
<Tabs id="tabsNav" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip itemTap="onItemTap">
<TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
<TabStripItem tap="onSecondTabStripItemTap">
<Label text="Second" />
</TabStripItem>
<TabStripItem title="First" tap="onThirdTabStripItemTap">
<Label text="Third" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="red" id="label" />
<Button tap="goToSecond" text="go to second item" id="button" />
<Frame defaultPage="tabs/first-page" id="frame" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second Content Item" backgroundColor="lightgreen" />
<Button tap="goToThird" text="go to thrid item" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First Content Item" backgroundColor="lightblue" />
<Button tap="goToFirst" text="go to first item" />
</StackLayout>
</TabContentItem>
</Tabs>
</Page>

13
apps/ui/src/tabs/second-page.ts
View File

@@ -1,13 +0,0 @@
import { EventData, Button } from '@nativescript/core';
export function goToFirst(args: EventData) {
console.log('---> goToFirst Page');
const button = <Button>args.object;
button.page.frame.navigate('tabs/first-page');
}
export function goBack(args: EventData) {
console.log('---> goBack');
const button = <Button>args.object;
button.page.frame.goBack();
}

7
apps/ui/src/tabs/second-page.xml
View File

@@ -1,7 +0,0 @@
<Page backgroundColor="lightblue" actionBarHidden="true">
<StackLayout>
<Label text="Second Page" />
<Button tap="goToFirst" text="go to first page" />
<Button tap="goBack" text="go back" />
</StackLayout>
</Page>

40
apps/ui/src/tabs/swipe-disabled-page.xml
View File

@@ -1,40 +0,0 @@
<Page>
<ActionBar title="Tabs Swipe Disabled" icon="" class="action-bar">
</ActionBar>
<Tabs id="tabs" swipeEnabled="false" automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="News" />
</TabStripItem>
<!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="Places" />
</TabStripItem>
<!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
</TabStrip>
<TabContentItem>
<StackLayout backgroundColor="blue">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="red">
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="green">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
</Tabs>
</Page>

16
apps/ui/src/tabs/tab-strip-item-page.xml
View File

@@ -1,16 +0,0 @@
<Page>
<Tabs id="tabs" automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="TabStripItem 1" iconSource="res://icon">
</TabStripItem>
</TabStrip>
<TabContentItem>
<Label text="TabContentItem 1"></Label>
</TabContentItem>
</Tabs>
</Page>

88
apps/ui/src/tabs/tab-strip-items-page.xml
View File

@@ -1,88 +0,0 @@
<Page>
<Tabs id="tabs" automationText="tabNavigation" iOSTabBarItemsAlignment="leading">
<TabStrip>
<TabStripItem title="TabStripItem 1" iconSource="res://icon">
</TabStripItem>
<TabStripItem>
<Label text="TabStripItem 2">
</Label>
<Image src="res://icon">
</Image>
</TabStripItem>
<TabStripItem title="TabStripItem X" iconSource="res://icon">
<Label text="TabStripItem 3">
</Label>
<Image src="res://icon">
</Image>
</TabStripItem>
<TabStripItem>
<Label text="TabStripItem 4">
</Label>
</TabStripItem>
<TabStripItem>
<Image src="res://icon">
</Image>
</TabStripItem>
<TabStripItem title="TabStripItem 6">
</TabStripItem>
<TabStripItem iconSource="res://icon">
</TabStripItem>
<TabStripItem title="TabStripItem X" iconSource="res://icon">
<Label text="TabStripItem 8">
</Label>
</TabStripItem>
<TabStripItem title="TabStripItem 9" iconSource="res://icon">
<Image src="res://icon">
</Image>
</TabStripItem>
</TabStrip>
<TabContentItem>
<Label text="TabContentItem 1"></Label>
</TabContentItem>
<TabContentItem>
<Label text="TabContentItem 2"></Label>
</TabContentItem>
<TabContentItem>
<Label text="TabContentItem 3"></Label>
</TabContentItem>
<TabContentItem>
<Label text="TabContentItem 4"></Label>
</TabContentItem>
<TabContentItem>
<Label text="TabContentItem 5"></Label>
</TabContentItem>
<TabContentItem>
<Label text="TabContentItem 6"></Label>
</TabContentItem>
<TabContentItem>
<Label text="TabContentItem 7"></Label>
</TabContentItem>
<TabContentItem>
<Label text="TabContentItem 8"></Label>
</TabContentItem>
<TabContentItem>
<Label text="TabContentItem 9"></Label>
</TabContentItem>
</Tabs>
</Page>

6
apps/ui/src/tabs/tabs-binding-page.ts
View File

@@ -1,6 +0,0 @@
import { TabsBindingNavigationViewModel } from './tabs-binding-view-model';
export function tabsLoaded(args) {
const page = args.object.page;
page.bindingContext = new TabsBindingNavigationViewModel();
}

17
apps/ui/src/tabs/tabs-binding-page.xml
View File

@@ -1,17 +0,0 @@
<Page class="page">
<ActionBar title="Tabs background-color" icon="" class="action-bar">
</ActionBar>
<GridLayout rows="auto,*">
<StackLayout row="0" >
<Button automationText="add-tab" text="add-tab" tap="{{ createItems }}"/>
<Button automationText="remove-last-tab" text="remove-last-tab" tap="{{ removeLastItem }}"/>
</StackLayout>
<GridLayout row="1">
<Tabs loaded="tabsLoaded" items="{{ tabContentItems }}" automationText="tabNavigation" >
<TabStrip items="{{ tabStripItems }}"></TabStrip>
</Tabs>
</GridLayout>
</GridLayout>
</Page>

59
apps/ui/src/tabs/tabs-binding-view-model.ts
View File

@@ -1,59 +0,0 @@
import { GridLayout } from '@nativescript/core/ui/layouts/grid-layout';
import { Label } from '@nativescript/core/ui/label';
import { Observable } from '@nativescript/core/data/observable';
import { ObservableArray } from '@nativescript/core/data/observable-array';
import { TabStripItem } from '@nativescript/core/ui/tab-navigation-base/tab-strip-item';
import { TabContentItem } from '@nativescript/core/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() {
console.log('Create item');
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++;
}
public removeLastItem() {
console.log('Remove item');
this.tabStripItems.pop();
this.tabContentItems.pop();
}
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.content = gridlayout;
return contentItem;
}
}

15
apps/ui/src/tabs/tabs-page.ts
View File

@@ -1,15 +0,0 @@
import { EventData, Page, Tabs } from '@nativescript/core';
export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabsNav');
tabsNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabsNav');
tabsNav.selectedIndex = 1;
}

36
apps/ui/src/tabs/tabs-page.xml
View File

@@ -1,36 +0,0 @@
<Page>
<ActionBar title="Tabs" icon="" class="action-bar">
</ActionBar>
<Tabs id="tabsNav" automationText="tabNavigation">
<TabStrip backgroundColor="palevioletred">
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Label text="News" />
</TabStripItem>
<TabStripItem>
<Label text="Places" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<StackLayout backgroundColor="skyblue">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="gold">
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="olive">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
</Tabs>
</Page>

40
apps/ui/src/tabs/tabs-position-page.xml
View File

@@ -1,40 +0,0 @@
<Page>
<ActionBar title="Tabs Position Bottom" icon="" class="action-bar">
</ActionBar>
<Tabs id="tabs" tabsPosition="bottom" automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="News" />
</TabStripItem>
<!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="Places" />
</TabStripItem>
<!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
</TabStrip>
<TabContentItem>
<StackLayout backgroundColor="blue">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="red">
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="green">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
</Tabs>
</Page>

27
apps/ui/src/tabs/text-transform-page.css
View File

@@ -1,27 +0,0 @@
Tabs {
text-transform: lowercase;
}
TabContentItem.special {
text-transform: uppercase;
}
TabStrip {
text-transform: capitalize;
}
TabStripItem.special {
text-transform: lowercase;
}
TabStripItem.special:active {
text-transform: uppercase;
}
TabStripItem.nested Label {
text-transform: lowercase;
}
TabStripItem.nested:active Label {
text-transform: uppercase;
}

33
apps/ui/src/tabs/text-transform-page.xml
View File

@@ -1,33 +0,0 @@
<Page class="page">
<ActionBar title="Tabs text-transform" class="action-bar">
</ActionBar>
<Tabs automationText="tabNavigation">
<TabStrip>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>