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 css support for tabs widget (#7491)

Browse Source
This commit is contained in:
Martin Yankov
2019-07-10 19:22:55 +03:00
committed by Manol Donev
parent aed1daa8f5
commit 30fc585425
19 changed files with 485 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
e2e/ui-tests-app/app/tabs/background-color-page.css
View File

@@ -2,6 +2,18 @@ Tabs {
background-color: gold;
}
TabContentItem.special {
background-color: olive;
}
TabStrip {
background-color: skyblue;
}
TabStripItem.special {
background-color: teal;
}
TabStripItem.special:active {
background-color: yellowgreen;
}

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

@@ -5,20 +5,20 @@
<Tabs>
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="First View" />
</GridLayout>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>

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

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

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

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

19
e2e/ui-tests-app/app/tabs/font-page.css Normal file
View File

@@ -0,0 +1,19 @@
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;
}

24
e2e/ui-tests-app/app/tabs/font-page.xml Normal file
View File

@@ -0,0 +1,24 @@
<Page class="page">
<ActionBar title="Tabs font" icon="" class="action-bar">
</ActionBar>
<Tabs>
<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>

3
e2e/ui-tests-app/app/tabs/highlight-color-page.css Normal file
View File

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

24
e2e/ui-tests-app/app/tabs/highlight-color-page.xml Normal file
View File

@@ -0,0 +1,24 @@
<Page class="page">
<ActionBar title="Tabs highlight-color" icon="" class="action-bar">
</ActionBar>
<Tabs>
<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>

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

@@ -13,12 +13,15 @@ export function pageLoaded(args: EventData) {
export function loadExamples() {
const examples = new Map<string, string>();
examples.set("tabs", "tabs/tabs-page");
examples.set("issue-5470", "tabs/issue-5470");
examples.set("issue-5470", "tabs/issue-5470-page");
examples.set("background-color", "tabs/background-color-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("color", "tabs/color-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-enabled", "tabs/swipe-enabled-page");
examples.set("strip-item", "tabs/tab-strip-item-page");
examples.set("strip-items", "tabs/tab-strip-items-page");
examples.set("tabs-position", "tabs/tabs-position-page");

19
e2e/ui-tests-app/app/tabs/text-transform-page.css Normal file
View File

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

24
e2e/ui-tests-app/app/tabs/text-transform-page.xml Normal file
View File

@@ -0,0 +1,24 @@
<Page class="page">
<ActionBar title="Tabs text-transform" icon="" class="action-bar">
</ActionBar>
<Tabs>
<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>