nativescript-bottombar - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

package.json

 {
   "name": "nativescript-bottombar",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "NativeScript plugin for AHBottomNavigation.",
@@ -5,0 +5,0 @@ "main": "bottombar",

README.md

 [![npm](https://img.shields.io/npm/v/nativescript-bottombar.svg)](https://www.npmjs.com/package/nativescript-bottombar)
 [![npm](https://img.shields.io/npm/dt/nativescript-bottombar.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-bottombar)
 
-# NativeScript BottomBar
+# NativeScript BottomBar :beers::fire::fr:
 
-NativeScript plugin for [AHBottomNavigation](https://github.com/aurelhubert/ahbottomnavigation) and [MiniTabBar](https://github.com/D-32/MiniTabBar)
+NativeScript plugin for [AHBottomNavigation](https://github.com/aurelhubert/ahbottomnavigation) and [MiniTabBar](https://github.com/D-32/MiniTabBar).
 
-# Under active development 
+Checkout [demo](https://github.com/rhanbIT/nativescript-bottombar/blob/master/DEMO.md).
 
-```The documentation will be updated asap, a lot of brend new features on top of the iOS support``` :beers: :smile:
-```NS 3.0 Support coming with the v3.0 of nativescript-bottombar package``` 
+## Installation
 
+- 2.x: `tns plugin add nativescript-bottombar@^2.1`
 
-## Demo
+- 3.x: `tns plugin add nativescript-bottombar`
 
-<img src="https://github.com/rhanbIT/nativescript-bottombar/blob/master/screenshots/showcase.gif" width="416" height="736" /> 
-
-## Install (Under active developpment)
-```bash
-tns plugin add nativescript-bottombar
-```
-
 # Usage
 
+[API documentation](https://github.com/rhanbIT/nativescript-bottombar/blob/master/API.md)
 
-
-## Vanilla NativeScript
-
-
-
-### XML
-
-IMPORTANT: Make sure you include ``xmlns:btn:"nativescript-bottombar"`` on the Page element
-
-```xml
-...
-xmlns:btn="nativescript-bottombar"
-...
-
-<btn:BottomBar tabSelected="tabSelected" titleState="{{ titleStateValue }}" hide="{{ hidden}}" > 
-  <btn:BottomBar.items>
-    <btn:BottomBarItem title="Cake" icon="ic_cake_white_24dp" color="#4CAF50" />
-    <btn:BottomBarItem title="Favorites" icon="ic_favorite_white_24dp" color="#2196F3" />
-    <btn:BottomBarItem title="Settings" icon="ic_settings_white_24dp" color="#FF4081" />
-  </btn:BottomBar.items>
-</btn:BottomBar>
-```
-
-### TypeScript 
-
-```typescript
-export function pageLoaded(args: EventData) {
-    // Get the event sender
-    page = <Page>args.object;
-    page.bindingContext = new HelloWorldModel();
-}
-
-export function tabSelected(args) {
-    console.log(args.eventName + ' ' + args.oldIndex + ' ' + args.newIndex)
-    page.bindingContext.set('message', `Tab ${args.newIndex} selected`)
-}
-```
-
-```typescript
-import {Observable} from 'data/observable';
-import {TITLE_STATE} from 'nativescript-bottombar/bottombar.common';
-
-export class HelloWorldModel extends Observable {
-  public message: string;
-  public titleStateValue: TITLE_STATE
-  public hidden: boolean;
-  constructor() {
-    super();
-    this.titleStateValue = TITLE_STATE.SHOW_WHEN_ACTIVE;
-    this.hidden = false;
-  }
-}
-```
 ## Angular NativeScript
 
-!!! If you want to change items color, title.. you'll have to wait for the BottomBar to be loaded !!!
-
 ### XML
@@ -87,6 +26,6 @@
 <GridLayout rows="*, auto">
-    <Label row="0" text="test"></Label>
-    <GridLayout row="1">
-        <BottomBar row="1" [items]="items" (tabSelected)="tabSelected($event)" [hide]="hidden" titleState="{{titleState}}" (loaded)="bottomBarLoaded()"></BottomBar>
-    </GridLayout>
+    <StackLayout row="0" orientation="vertical">
+       <Label text="demo"></Label>
+    </StackLayout>
+    <BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)" [inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
 </GridLayout>
@@ -99,3 +38,3 @@ ```
 import { registerElement } from 'nativescript-angular';
-import { BottomBar, BottomBarItem, TITLE_STATE, SelectedIndexChangedEventData } from 'nativescript-bottombar';
+import { BottomBar, BottomBarItem, TITLE_STATE, SelectedIndexChangedEventData, Notification } from 'nativescript-bottombar';
 
@@ -105,33 +44,32 @@ registerElement('BottomBar', () => BottomBar);
 @Component({
-    selector: "ns-app",
+    selector: "nsapp",
     templateUrl: "app.component.html",
 })
-export class AppComponent  {
 
-    public selectedIndex: number;
+export class AppComponent {
     public hidden: boolean;
     public titleState: TITLE_STATE;
+    public _bar: BottomBar;
+    public inactiveColor: string;
+    public accentColor: string;
 
     public items: Array<BottomBarItem> = [
-        new BottomBarItem(0, "Home", "ic_home_black_24dp", "black", "lol"),
-        new BottomBarItem(1, "Calendar", "ic_calendar", "#1083BF", "mdr"),
-        new BottomBarItem(2, "Profile", "ic_collaborator", "pink", "lmao"),
-        new BottomBarItem(3, "Message", "ic_paperplane", "green", "xD")
+        new BottomBarItem(0, "Home", "ic_home_black_24dp", "black", new Notification("blue", "white", "1")),
+        new BottomBarItem(1, "Calendar", "ic_calendar", "#1083BF", new Notification("green", "blue", "1")),
+        new BottomBarItem(2, "Profile", "ic_collaborator", "pink", new Notification("pink", "yellow", "1")),
+        new BottomBarItem(3, "Message", "ic_paperplane", "green", new Notification("green", "red", "1"))
     ];
-    constructor() {
-        this.selectedIndex = 0;
+
+    tabLoaded(event) {
+        this._bar = <BottomBar>event.object;
         this.hidden = false;
         this.titleState = TITLE_STATE.SHOW_WHEN_ACTIVE;
+        this.inactiveColor = "white";
+        this.accentColor = "blue";
     }
     
-    tabSelected(args: SelectedIndexChangedEventData) {
-        if (args.newIndex !== args.oldIndex) {
-            console.log(args.newIndex);
-            this.selectedIndex = args.newIndex;
-            this.items[this.selectedIndex].notification = "1";
-        }
-    }
-    bottomBarLoaded() {
-        console.log('bottomBarLoaded');
-    }
+     tabSelected(args: SelectedIndexChangedEventData) {
+         // only triggered when a different tab is tapped
+         console.log(args.newIndex);
+     }
 }
@@ -143,2 +81,7 @@ ```
 
-<img src="https://raw.githubusercontent.com/rhanbIT/nativescript-bottombar/master/screenshots/ressources.png" width="250" height="368" />
+
+  iOS    |  Android
+-------- | ---------
+![iOS](screenshots/ressources.ios.png) | ![Android](screenshots/ressources.android.png)
+
+[API documentation](https://github.com/rhanbIT/nativescript-bottombar/blob/master/API.md)

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44026

increased by9.98%

Number of downloads

5

increased by25%

Number of package files

32

increased by6.67%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

84

decreased by-40.43%

No dependency changes