Skip to content

Commit e1c7add

Browse files
NickIlievNickIliev
committed
docs: tabs CSS example
1 parent b0b46b9 commit e1c7add

File tree

8 files changed

+69
-18
lines changed

8 files changed

+69
-18
lines changed

‎app/ns-ui-widgets-category/bottom-navigation/theming/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
> **Note:** - The integration with `nativescript-theme` and the support for custom CSS is being developed and is on its way.
1+
> **Note:** - The integration with `nativescript-theme` and the support for custom CSS is currently under development and is on its way.
22
33
<snippet id='bottom-nav-theming-css'/>

‎app/ns-ui-widgets-category/bottom-navigation/theming/theming-page.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ TabContentItem.second-tabcontent {
2121
TabContentItem.third-tabcontent {
2222
color: antiquewhite;
2323
}
24-
/* << bottom-nav-theming-js */
24+
/* << bottom-nav-theming-css */

‎app/ns-ui-widgets-category/bottom-navigation/tips-and-tricks/article.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
<!-- TODO add sections for fonticon and icon size guidelines (@2x, @3x and drawables) here -->

‎app/ns-ui-widgets-category/tabs/theming/article.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
<!-- TODO add styling guidelines and theming here -->
1+
> **Note:** - The integration with `nativescript-theme` and the support for custom CSS is currently under development and is on its way.
2+
3+
<snippet id='tabs-theming-css'/>

‎app/ns-ui-widgets-category/tabs/theming/theming-page.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* >> tabs-theming-css */
2+
Tabs.tabs {
3+
background-color: orangered;
4+
color: gold;
5+
}
6+
7+
TabStripItem.tabstripitem-active {
8+
background-color: teal;
9+
}
10+
11+
TabStripItem.tabstripitem-active:active {
12+
background-color: yellowgreen;
13+
}
14+
15+
TabContentItem.first-tabcontent {
16+
color: olive;
17+
}
18+
19+
TabContentItem.second-tabcontent {
20+
color: aquamarine;
21+
}
22+
23+
TabContentItem.third-tabcontent {
24+
color: antiquewhite;
25+
}
26+
/* << tabs-theming-css */

‎app/ns-ui-widgets-category/tabs/theming/theming-page.xml

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
<Page>
22
<Page.actionBar>
3-
<ActionBar title="Tabs - Theming"/>
3+
<ActionBar title="BottomNavigation - Usage"/>
44
</Page.actionBar>
55

6-
<Tabs selectedIndex="1">
6+
<!-- Tabs supports the CSS properties `background-color` and `color` -->
7+
<Tabs selectedIndex="1" class="tabs">
78

8-
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
9+
<!-- TabStripItem supports the CSS pseudo selector :active (see theming-page.css) -->
910
<TabStrip>
10-
<TabStripItem title="Home" iconSource="res://baseline_home_black_18pt"></TabStripItem>
11-
<TabStripItem title="Account" iconSource="res://baseline_account_balance_black_18pt"></TabStripItem>
12-
<TabStripItem title="Search" iconSource="res://baseline_search_black_18pt"></TabStripItem>
11+
<TabStripItem class="tabstripitem-active" title="Home" iconSource="res://baseline_home_black_24pt"></TabStripItem>
12+
<TabStripItem class="tabstripitem-active" title="Account" iconSource="res://baseline_account_balance_black_24pt"></TabStripItem>
13+
<TabStripItem class="tabstripitem-active" title="Search" iconSource="res://baseline_search_black_24pt"></TabStripItem>
1314
</TabStrip>
1415

15-
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
16-
<TabContentItem>
16+
<!-- TabContentItem supports the CSS property `color` -->
17+
<TabContentItem class="first-tabcontent">
1718
<GridLayout>
18-
<Label text="Home Page" class="h2 text-center"></Label>
19+
<Label text="Home Page" class="h2 text-center" verticalAlignment="middle"></Label>
1920
</GridLayout>
2021
</TabContentItem>
21-
<TabContentItem>
22+
<TabContentItem class="second-tabcontent">
2223
<GridLayout>
23-
<Label text="Account Page" class="h2 text-center"></Label>
24+
<Label text="Account Page" class="h2 text-center" verticalAlignment="middle"></Label>
2425
</GridLayout>
2526
</TabContentItem>
26-
<TabContentItem>
27+
<TabContentItem class="third-tabcontent">
2728
<GridLayout>
28-
<Label text="Search Page" class="h2 text-center"></Label>
29+
<Label text="Search Page" class="h2 text-center" verticalAlignment="middle"></Label>
2930
</GridLayout>
3031
</TabContentItem>
3132

‎app/ns-ui-widgets-category/tabs/theming/theming-ts-page.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
Tabs.tabs {
2+
background-color: orangered;
3+
color: gold;
4+
}
5+
6+
TabStripItem.tabstripitem-active {
7+
background-color: teal;
8+
}
9+
10+
TabStripItem.tabstripitem-active:active {
11+
background-color: yellowgreen;
12+
}
13+
14+
TabContentItem.first-tabcontent {
15+
color: olive;
16+
}
17+
18+
TabContentItem.second-tabcontent {
19+
color: aquamarine;
20+
}
21+
22+
TabContentItem.third-tabcontent {
23+
color: antiquewhite;
24+
}

‎app/ns-ui-widgets-category/tabs/tips-and-tricks/article.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
<!-- TODO add sections for fonticon and icon size guidelines (@2x, @3x and drawables) here -->

0 commit comments

Comments
 (0)