|
| 1 | +// >> bottom-navigation-properties-ng |
| 2 | +import { Component } from "@angular/core"; |
| 3 | +import { Label } from "tns-core-modules/ui/label"; |
| 4 | +import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout"; |
| 5 | +import { Color } from "tns-core-modules/color/color"; |
| 6 | +import { EventData } from "tns-core-modules/data/observable"; |
| 7 | +import { BottomNavigation, TabStrip, TabStripItem, TabContentItem } from "tns-core-modules/ui/bottom-navigation"; |
| 8 | + |
| 9 | +@Component({ |
| 10 | + moduleId: module.id, |
| 11 | + templateUrl: "./properties.component.html" |
| 12 | +}) |
| 13 | +export class PropertiesComponent { |
| 14 | + onBottomNavLoaded(args: EventData) { |
| 15 | + const bottomNav = args.object as BottomNavigation; |
| 16 | + |
| 17 | + /* |
| 18 | + Using the items property to assign array of TabContentItem componentns |
| 19 | + Note: The number of TabContentItem components should be equal to the number of TabStripItem components |
| 20 | + */ |
| 21 | + const tabContentItemsArray: Array<TabContentItem> = this.createTabsContentArray(); |
| 22 | + bottomNav.items = tabContentItemsArray; |
| 23 | + |
| 24 | + /* |
| 25 | + Using the tabStrip property to createa a TabStrip with multiple TabStripItems (tabs) |
| 26 | + Note: The number of TabStripItem components should be equal to the number of TabContentItem components |
| 27 | + */ |
| 28 | + const tabStrip = this.createTabStrip(); |
| 29 | + bottomNav.tabStrip = tabStrip; |
| 30 | + |
| 31 | + /* |
| 32 | + Using the selectedIndex property |
| 33 | + */ |
| 34 | + bottomNav.selectedIndex = 1; |
| 35 | + |
| 36 | + console.log(bottomNav.nativeView); // === bottomNav.android | bottomNav.ios |
| 37 | + } |
| 38 | + |
| 39 | + createTabStrip() { |
| 40 | + const tabStrip: TabStrip = new TabStrip(); |
| 41 | + tabStrip.iosIconRenderingMode = "automatic"; // iOS only (automatic is the default value) |
| 42 | + const tabStripItems: Array<TabStripItem> = []; |
| 43 | + for (let index = 0; index < 3; index++) { |
| 44 | + const item: TabStripItem = new TabStripItem(); |
| 45 | + /* |
| 46 | + Using TabStripItem title property |
| 47 | + */ |
| 48 | + item.title = `Tab ${index}`; |
| 49 | + /* |
| 50 | + Using TabStripItem title property |
| 51 | + */ |
| 52 | + item.iconSource = index === 0 |
| 53 | + ? "res://baseline_home_black_24pt" |
| 54 | + : (index === 1 |
| 55 | + ? "res://baseline_account_balance_black_24pt" |
| 56 | + : "res://baseline_search_black_24pt"); |
| 57 | + tabStripItems.push(item); |
| 58 | + } |
| 59 | + tabStrip.items = tabStripItems; |
| 60 | + |
| 61 | + return tabStrip; |
| 62 | + } |
| 63 | + |
| 64 | + createTabsContentArray() { |
| 65 | + const arr: Array<TabContentItem> = []; |
| 66 | + for (let index = 0; index < 3; index++) { |
| 67 | + const item: TabContentItem = new TabContentItem(); |
| 68 | + // The createContent is a custom method that returns a StackLayout with a Label as a chils |
| 69 | + item.view = this.createContent(index); |
| 70 | + arr.push(item); |
| 71 | + } |
| 72 | + |
| 73 | + return arr; |
| 74 | + } |
| 75 | + // >> (hide) |
| 76 | + createContent(index: number) { |
| 77 | + const label = new Label(); |
| 78 | + label.text = `${index === 0 ? "Home" : (index === 1 ? "Account" : "Search")}`; |
| 79 | + label.className = "h2 text-center"; |
| 80 | + label.color = new Color("red"); |
| 81 | + const stack = new StackLayout(); |
| 82 | + stack.verticalAlignment = "middle"; |
| 83 | + stack.addChild(label); |
| 84 | + |
| 85 | + return stack; |
| 86 | + } |
| 87 | + // << (hide) |
| 88 | +} |
| 89 | +// << bottom-navigation-properties-ng |
0 commit comments