Skip to content

Commit febd1fb

Browse files
NickIlievNickIliev
committed
docs: BottomNavigation events
1 parent c8b75fb commit febd1fb

File tree

12 files changed

+153
-7
lines changed

12 files changed

+153
-7
lines changed

‎app/ng-ui-widgets-category/bottom-navigation/bottom-navigation-examples.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
22
import { Link } from "../../link";
33

44
let menuLinks = [
5+
new Link("Events", "/bottom-navigation/events"),
56
new Link("Usage", "/bottom-navigation/usage"),
7+
new Link("Theming", "/bottom-navigation/theming")
68
];
79

810
@Component({

‎app/ng-ui-widgets-category/bottom-navigation/bottom-navigation-examples.module.ts‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
22
import { NativeScriptRouterModule } from "nativescript-angular/router";
33
import { NativeScriptCommonModule } from "nativescript-angular/common";
4-
import { BottomNavigationExamplesComponent } from "./bottom-navigation-examples.component";
5-
import { UsageComponent } from "./usage/usage.component";
64
import { NativeScriptFormsModule } from "nativescript-angular/forms";
75
import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
86

7+
import { BottomNavigationExamplesComponent } from "./bottom-navigation-examples.component";
8+
import { UsageComponent } from "./usage/usage.component";
9+
import { ThemingComponent } from "./theming/theming.component";
10+
import { EventsComponent } from "./events/events.component";
911
export const routerConfig = [
1012
{
1113
path: "",
@@ -15,6 +17,16 @@ export const routerConfig = [
1517
path: "usage",
1618
component: UsageComponent,
1719
data: { title: "Usage" }
20+
},
21+
{
22+
path: "theming",
23+
component: ThemingComponent,
24+
data: { title: "Theming" }
25+
},
26+
{
27+
path: "events",
28+
component: EventsComponent,
29+
data: { title: "Events" }
1830
}
1931
];
2032
@NgModule({
@@ -28,7 +40,9 @@ export const routerConfig = [
2840
],
2941
declarations: [
3042
BottomNavigationExamplesComponent,
31-
UsageComponent
43+
EventsComponent,
44+
UsageComponent,
45+
ThemingComponent
3246
]
3347
})
3448

‎app/ng-ui-widgets-category/bottom-navigation/events/article.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
- `selectedIndexChanged` - Event used to track the tabs interaction though the change of `selectedIndex` property of `BottomNavigation` component. The event data is of type `SelectedIndexChangedEventData` extends `EventData` with two new properties:
2+
- `oldIndex` - Provides the old selected index.
3+
- `newIndwex` - Provides the new selected index.
4+
5+
<snippet id='bottom-navigation-events-ng'/>

‎app/ng-ui-widgets-category/bottom-navigation/events/events.component.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!-- >> bottom-navigation-events-html-ng -->
2+
<BottomNavigation [selectedIndex]="selectedIndex" (loaded)="onBottomNavLoaded($event)">
3+
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
4+
<TabStrip>
5+
<TabStripItem title="Home" iconSource="res://baseline_home_black_24pt"></TabStripItem>
6+
<TabStripItem title="Account" iconSource="res://baseline_account_balance_black_24pt"></TabStripItem>
7+
</TabStrip>
8+
9+
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
10+
<TabContentItem>
11+
<GridLayout rows="*, *">
12+
<Label row="0" text="Home Page" class="h2 text-center" color="orange"></Label>
13+
<Label row="1" [text]="selectedIndex" class="h2 text-center"></Label>
14+
</GridLayout>
15+
</TabContentItem>
16+
<TabContentItem>
17+
<GridLayout rows="*, *">
18+
<Label row="0" text="Account Page" class="h2 text-center"></Label>
19+
<Label row="1" [text]="selectedIndex" class="h2 text-center"></Label>
20+
</GridLayout>
21+
</TabContentItem>
22+
</BottomNavigation>
23+
<!-- << bottom-navigation-events-html-ng -->

‎app/ng-ui-widgets-category/bottom-navigation/events/events.component.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// >> bottom-navigation-events-ng
2+
import { Component, NgZone } from "@angular/core";
3+
import { EventData } from "tns-core-modules/data/observable";
4+
import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
5+
6+
@Component({
7+
moduleId: module.id,
8+
templateUrl: "./events.component.html"
9+
})
10+
export class EventsComponent {
11+
selectedIndex: number = 1;
12+
13+
constructor(private _zone: NgZone) { }
14+
15+
onBottomNavLoaded(args: EventData) {
16+
// Using the loaded event to ger a reference to the BottomNavigation
17+
const bottomNavigation = args.object as BottomNavigation;
18+
19+
// Using selectedIndexChanged
20+
bottomNavigation.on(BottomNavigation.selectedIndexChangedEvent, (data: SelectedIndexChangedEventData) => {
21+
const oldIndex: number = data.oldIndex;
22+
const newIndex: number = data.newIndex;
23+
console.log(`oldIndex: ${oldIndex}; newIndex: ${newIndex}`);
24+
25+
this._zone.run(() => {
26+
this.selectedIndex = newIndex;
27+
console.log(`this.selectedIndex ${this.selectedIndex}`);
28+
});
29+
});
30+
}
31+
}
32+
// << bottom-navigation-events-ng

‎app/ng-ui-widgets-category/bottom-navigation/metadata.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
2-
title: Button
3-
description: The Button provides abstraction over Android's widget.Button and iOS's UIButton. This component can be defined via HTML and we can set up its text value and set up tap event handler, which will be fired on button click.
2+
title: BottomNavigation
3+
description: The NativeScript's BottomNavigation component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms. The recommended scenario suitable for BottomNavigation is a high level navigaiton with 3 to 5 tabs each with separate function.
44
position: 44
55
slug: bottom-navigation-ng
66
---
7+
example-order: usage, theming, properties, events, tips-and-tricks

‎app/ng-ui-widgets-category/bottom-navigation/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
> **Disclaimer:** The `BottomNavigation` component is currently in **Beta** version. The component is being actively developed - use [the tracking issue](https://github.com/NativeScript/NativeScript/issues/6967) for details about the ongoing implementation.
1+
> **Disclaimer:** The `BottomNavigation` component is currently **Beta** version. The component is being actively developed - use [the tracking issue](https://github.com/NativeScript/NativeScript/issues/6967) for details about the ongoing implementation.
22
33
The `BottomNavigation` component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms. The recommended scenario suitable for `BottomNavigation` is a high level navigation with 3 to 5 tabs each with separate function. For additional information and details about bottom navigation refer to [the Material Design guidelines](https://material.io/design/components/bottom-navigation.html#usage).
44

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
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='bottom-nav-theming-css-ng'/>

‎app/ng-ui-widgets-category/bottom-navigation/theming/theming.component.css‎

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

‎app/ng-ui-widgets-category/bottom-navigation/theming/theming.component.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!-- BottomNavigation supports the CSS properties `background-color` and `color` -->
2+
<BottomNavigation selectedIndex="1" class="bottom-nav">
3+
4+
<!-- TabStripItem supports the CSS pseudo selector :active (see theming-page.css) -->
5+
<TabStrip>
6+
<TabStripItem class="tabstripitem-active" title="Home" iconSource="res://baseline_home_black_24pt">
7+
</TabStripItem>
8+
<TabStripItem class="tabstripitem-active" title="Account" iconSource="res://baseline_account_balance_black_24pt"></TabStripItem>
9+
<TabStripItem class="tabstripitem-active" title="Search" iconSource="res://baseline_search_black_24pt">
10+
</TabStripItem>
11+
</TabStrip>
12+
13+
<!-- TabContentItem supports the CSS property `color` -->
14+
<TabContentItem class="first-tabcontent">
15+
<GridLayout>
16+
<Label text="Home Page" horizontalAlignment="center" verticalAlignment="middle"></Label>
17+
</GridLayout>
18+
</TabContentItem>
19+
<TabContentItem class="second-tabcontent">
20+
<GridLayout>
21+
<Label text="Account Page" horizontalAlignment="center" verticalAlignment="middle"></Label>
22+
</GridLayout>
23+
</TabContentItem>
24+
<TabContentItem class="third-tabcontent">
25+
<GridLayout>
26+
<Label text="Search Page" horizontalAlignment="center" verticalAlignment="middle"></Label>
27+
</GridLayout>
28+
</TabContentItem>
29+
30+
</BottomNavigation>

0 commit comments

Comments
 (0)