Skip to content

Commit b0b46b9

Browse files
NickIlievNickIliev
committed
docs: add CSS example for BottomNavigaiton
1 parent 200f15e commit b0b46b9

File tree

7 files changed

+81
-29
lines changed

7 files changed

+81
-29
lines changed

‎app/ns-ui-widgets-category/bottom-navigation/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 being developed and is on its way.
2+
3+
<snippet id='bottom-nav-theming-css'/>

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

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

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,30 @@
33
<ActionBar title="BottomNavigation - Usage"/>
44
</Page.actionBar>
55

6-
<BottomNavigation selectedIndex="1">
6+
<!-- BottomNavigation supports the CSS properties `background-color` and `color` -->
7+
<BottomNavigation selectedIndex="1" class="bottom-nav">
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/bottom-navigation/theming/theming-ts-page.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
BottomNavigation.bottom-nav {
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/bottom-navigation/theming/theming-ts-page.xml

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

6-
<BottomNavigation selectedIndex="1">
6+
<!-- BottomNavigation supports the CSS properties `background-color` and `color` -->
7+
<BottomNavigation selectedIndex="1" class="bottom-nav">
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

3233
</BottomNavigation>
33-
34+
3435
</Page>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,11 @@ function createContent(index: number) {
8383

8484
stack.on("loaded", (args) => {
8585
console.log(`Loaded [${(<any>args.object).getViewById("label").text}]`);
86-
})
86+
});
8787

8888
stack.on("unloaded", (args) => {
8989
console.log(`UNLOADED [${(<any>args.object).getViewById("label").text}]`);
90-
})
90+
});
9191

9292
return stack;
9393
}

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
},
3131
"dependencies": {
3232
"nativescript-theme-core": "~1.0.4",
33-
"tns-core-modules": "rc"
33+
"tns-core-modules": "^6.1.0-next-2019-07-03-144356-02"
3434
},
3535
"devDependencies": {
3636
"eslint": "~5.9.0",

0 commit comments

Comments
 (0)