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

feat: add background color css to tab strip (#7414)

Browse Source
This commit is contained in:
Martin Yankov
2019-06-28 10:07:33 +03:00
committed by GitHub
parent 62630337ef
commit 43534502f9
27 changed files with 334 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
e2e/ui-tests-app/app/bottom-navigation/background-color-page.css Normal file
View File

@@ -0,0 +1,7 @@
BottomNavigation {
background-color: gold;
}
TabStrip {
background-color: skyblue;
}

6
e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml
View File

@@ -3,7 +3,7 @@
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation style="background-color: green;">
<BottomNavigation>
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
@@ -11,13 +11,13 @@
<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>

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

@@ -4,20 +4,20 @@
<BottomNavigation style="color: green;">
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

2
e2e/ui-tests-app/app/bottom-navigation/icon-change-page.ts
View File

@@ -1,7 +1,7 @@
import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const bottomNav = args.object as BottomNavigation;
const bottomNav = <BottomNavigation>args.object;
const newItem = bottomNav.tabStrip.items[args.newIndex];
if (newItem) {

2
e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
View File

@@ -1,4 +1,4 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
</ActionBar>

6
e2e/ui-tests-app/app/bottom-navigation/icon-title-placement-page.xml
View File

@@ -11,19 +11,19 @@
<TabContentItem>
<GridLayout>
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="Title and icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="Only icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="Only title" />
</GridLayout>
</TabContentItem>
</BottomNavigation>

2
e2e/ui-tests-app/app/bottom-navigation/issue-5470-page.xml
View File

@@ -23,5 +23,5 @@
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

7
e2e/ui-tests-app/app/tabs/background-color-page.css Normal file
View File

@@ -0,0 +1,7 @@
Tabs {
background-color: gold;
}
TabStrip {
background-color: skyblue;
}

22
e2e/ui-tests-app/app/tabs/background-color-page.xml
View File

@@ -1,24 +1,24 @@
<Page class="page">
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
<ActionBar title="Tabs background-color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation style="background-color: green;">
<Tabs>
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</Page>

22
e2e/ui-tests-app/app/tabs/color-page.xml
View File

@@ -1,23 +1,23 @@
<Page class="page">
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
<ActionBar title="Tabs color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation style="color: green;">
<Tabs style="color: green;">
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</Page>

10
e2e/ui-tests-app/app/tabs/default-page.ts
View File

@@ -1,17 +1,17 @@
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
import { Tabs } from "tns-core-modules/ui/tabs";
export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
const tabsNav = <Tabs>page.getViewById("tabsNav");
bottomNav.selectedIndex = 0;
tabsNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
const tabsNav = <Tabs>page.getViewById("tabsNav");
bottomNav.selectedIndex = 1;
tabsNav.selectedIndex = 1;
}

4
e2e/ui-tests-app/app/tabs/default-page.xml
View File

@@ -1,6 +1,6 @@
<Page>
<ActionBar title="BottomNavigation" icon="" class="action-bar">
<ActionBar title="Tabs" icon="" class="action-bar">
</ActionBar>
<!-- w/o TabStrip -->
@@ -18,7 +18,7 @@
</BottomNavigation> -->
<!-- w/ TabStrip -->
<Tabs id="bottomNav">
<Tabs id="tabsNav">
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>

8
e2e/ui-tests-app/app/tabs/icon-change-page.ts
View File

@@ -1,14 +1,14 @@
import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const bottomNav = args.object as BottomNavigation;
const tabsNav = <Tabs>args.object;
const newItem = bottomNav.tabStrip.items[args.newIndex];
const newItem = tabsNav.tabStrip.items[args.newIndex];
if (newItem) {
newItem.iconSource = "res://icon";
}
const oldItem = bottomNav.tabStrip.items[args.oldIndex];
const oldItem = tabsNav.tabStrip.items[args.oldIndex];
if (oldItem) {
oldItem.iconSource = "res://testlogo";
}

8
e2e/ui-tests-app/app/tabs/icon-change-page.xml
View File

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

30
e2e/ui-tests-app/app/tabs/icon-title-placement-page.xml
View File

@@ -1,30 +1,30 @@
<Page class="page">
<ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar">
<ActionBar title="Tabs icon title placement" icon="" class="action-bar">
</ActionBar>
<BottomNavigation>
<Tabs>
<TabStrip>
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem title="Title"></TabStripItem>
<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" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Title and icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Only icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Only title" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</Page>

8
e2e/ui-tests-app/app/tabs/issue-5470-page.xml
View File

@@ -1,9 +1,9 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
<ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar">
<ActionBar title="Tabs issue 5470" icon="" class="action-bar">
</ActionBar>
<BottomNavigation>
<Tabs>
<TabStrip>
<TabStripItem title="Tab1"></TabStripItem>
<TabStripItem title="Tab2"></TabStripItem>
@@ -22,6 +22,6 @@
<StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</Page>

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

@@ -11,14 +11,14 @@ export function pageLoaded(args: EventData) {
export function loadExamples() {
const examples = new Map<string, string>();
examples.set("default", "tabs/default-page");
examples.set("issue-5470", "tabs/issue-5470-page");
examples.set("tabs", "tabs/tabs-page");
examples.set("issue-5470", "tabs/issue-5470");
examples.set("background-color", "tabs/background-color-page");
examples.set("color", "tabs/color-page");
examples.set("icon-title-placement", "tabs/icon-title-placement-page");
examples.set("icon-change", "tabs/icon-change-page");
examples.set("swipe-enabled", "tabs/swipe-enabled-page");
examples.set("tabs-position", "tabs/tabs-position-page");
examples.set("color", "tabs/color");
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");
return examples;
}

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

@@ -0,0 +1,17 @@
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Tabs } from "tns-core-modules/ui/tabs";
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
e2e/ui-tests-app/app/tabs/tabs-page.xml Normal file
View File

@@ -0,0 +1,89 @@
<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">
<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>