nativescript-bottom-navigation - npm Package Compare versions

Comparing version 1.5.1 to 2.0.0

angular/index.js

@@ -6,2 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./nativescript-bottom-navigation.module"));
+__export(require("./nativescript-bottom-navigation-bar.module"));
+//# sourceMappingURL=index.js.map

angular/index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./nativescript-bottom-navigation.module"}]}]
+[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./nativescript-bottom-navigation-bar.module"}]}]

index.d.ts

@@ -1,38 +0,55 @@
-import { EventData } from 'tns-core-modules/data/observable';
-import { AddChildFromBuilder, View } from 'tns-core-modules/ui/core/view';
-import { BottomNavigationBase, BottomNavigationTabBase } from './bottom-navigation.common';
+import { BottomNavigationBarBase } from './lib/base/bottom-navigation-bar.base';
+import { BottomNavigationTabBase } from './lib/base/bottom-navigation-tab.base';
+import {
+  TabSelectedEventData,
+  TabPressedEventData,
+  TabReselectedEventData,
+  TitleVisibility,
+} from './lib/internal/internals';
 
-export declare interface OnTabPressedEventData extends EventData {
-  index: number;
-}
+export * from './lib/internal/internals';
 
-export declare interface OnTabReselectedEventData extends EventData {
-  index: number;
-}
-
-export declare interface OnTabSelectedEventData extends EventData {
-  oldIndex: number;
-  newIndex: number;
-}
-
-export type TitleVisibility = 'always' | 'selected' | 'never';
-
-export declare class BottomNavigation extends BottomNavigationBase {
-
-  protected titleVisibilityOptions;
-
+export declare class BottomNavigationBar extends BottomNavigationBarBase {
+  static tabPressedEvent: string;
+  static tabSelectedEvent: string;
+  static tabReselectedEvent: string;
+  readonly ios: any;
   readonly android: any;
-  readonly ios: any;
+  readonly items: BottomNavigationTab[];
+  selectedTabIndex: number;
+  titleVisibility: TitleVisibility;
+  activeColor: string;
+  inactiveColor: string;
+  backgroundColor: Color;
+  selectTab(index: number): void;
+  showBadge(index: number, value?: number): void;
+  removeBadge(index: number): void;
+  on(
+    event: 'tabPressed',
+    callback: (args: TabPressedEventData) => void,
+    thisArg?: any,
+  ): void;
+  on(
+    event: 'tabSelected',
+    callback: (args: TabSelectedEventData) => void,
+    thisArg?: any,
+  ): void;
+  on(
+    event: 'tabReselected',
+    callback: (args: TabReselectedEventData) => void,
+    thisArg?: any,
+  ): void;
 
-  private _delegate;
-
-  constructor();
-
-  public createTabs(tabs: BottomNavigationTab[]): void;
-
-  protected selectTabNative(index: number): void;
+  // Needed when 'on' method is overriden.
+  on(
+    eventNames: string,
+    callback: (data: EventData) => void,
+    thisArg?: any,
+  ): void;
 }
 
 export declare class BottomNavigationTab extends BottomNavigationTabBase {
-  constructor(title: string, icon: string, selectable?: boolean, parent?: WeakRef<BottomNavigationBase>);
+  title: string;
+  icon: string;
+  isSelectable: boolean;
 }

package.json

 {
-    "name": "nativescript-bottom-navigation",
-    "version": "1.5.1",
-    "description": "Nativescript plugin to add a bottom navigation component for Android & iOS",
-    "main": "bottom-navigation",
-    "typings": "index.d.ts",
-    "nativescript": {
-        "platforms": {
-            "android": "4.0.0",
-            "ios": "4.0.0"
-        }
-    },
-    "scripts": {
-        "tsc": "tsc -skipLibCheck",
-        "ngc.clean": "find ./ angular/ -name '*.metadata.json' -delete",
-        "ngc": "npm i && npm run ngc.clean && node --max-old-space-size=8192 node_modules/.bin/ngc -skipLibCheck -p tsconfig.json",
-        "build": "npm i && tsc && npm run ngc",
-        "ci.tslint": "npm i && tslint '**/*.ts' --config '../tslint.json' --exclude '**/node_modules/**'",
-        "prepublishOnly": "npm run build",
-        "test.android": "npm i && npm run tsc && npm run ci.tslint && cd ../demo && tns build android && tns test android --justlaunch",
-        "test.angular.android": "npm i && npm run tsc && npm run ci.tslint && cd ../demo-angular && tns build android && tns test android --justlaunch",
-        "test.ios": "npm i && npm run tsc && npm run ci.tslint && cd ../demo && tns build ios && tns test ios --justlaunch",
-        "test.angular.ios": "npm i && npm run tsc && npm run ci.tslint && cd ../demo-angular && tns build ios && tns test ios --justlaunch",
-        "plugin.link": "npm link && cd ../demo && npm link nativescript-bottom-navigation && cd ../src",
-        "plugin.angular.link": "npm link && cd ../demo-angular && npm link nativescript-bottom-navigation && cd ../src",
-        "plugin.vue.link": "npm link && cd ../demo-vue && npm link nativescript-bottom-navigation && cd ../src",
-        "plugin.tscwatch": "npm run tsc -- -w",
-        "demo.ios": "npm i && npm run tsc && cd ../demo && tns run ios --bundle --syncAllFiles",
-        "demo.angular.ios": "npm i && npm run tsc && cd ../demo-angular && tns run ios --bundle --syncAllFiles",
-        "demo.vue.ios": "npm i && npm run tsc && cd ../demo-vue && tns run ios --bundle --syncAllFiles",
-        "demo.android": "npm i && npm run tsc && cd ../demo && tns run android --bundle --syncAllFiles",
-        "demo.angular.android": "npm i && npm run tsc && cd ../demo-angular && tns run android --bundle --syncAllFiles",
-        "demo.vue.android": "npm i && npm run tsc && cd ../demo-vue && tns run android --bundle --syncAllFiles",
-        "demo.reset": "cd ../demo && rimraf platforms",
-        "demo.angular.reset": "cd ../demo-angular && rimraf platforms",
-        "demo.vue.reset": "cd ../demo-vue && rimraf platforms",
-        "plugin.prepare": "npm run build && cd ../demo && tns plugin remove nativescript-bottom-navigation && tns plugin add ../src",
-        "plugin.angular.prepare": "npm run build && cd ../demo-angular && tns plugin remove nativescript-bottom-navigation && tns plugin add ../src",
-        "plugin.vue.prepare": "npm run build && cd ../demo-vue && tns plugin remove nativescript-bottom-navigation && tns plugin add ../src",
-        "clean": "cd ../demo && rimraf hooks node_modules platforms && cd ../src && rimraf node_modules && npm run plugin.link",
-        "clean.angular": "cd ../demo-angular && rimraf hooks node_modules platforms && cd ../src && rimraf node_modules && npm run plugin.angular.link",
-        "clean.vue": "cd ../demo-vue && rimraf hooks node_modules platforms && cd ../src && rimraf node_modules && npm run plugin.vue.link"
-    },
-    "keywords": [
-        "NativeScript",
-        "JavaScript",
-        "Typescript",
-        "Android",
-        "iOS",
-        "Henry Chavez",
-        "Bytpher",
-        "Bottom Navigation",
-        "Material Design",
-        "Tab Navigation"
-    ],
-    "author": {
-        "name": "Henry Chavez",
-        "email": "[e-mail]"
-    },
-    "bugs": {
-        "url": "https://github.com/henrychavez/nativescript-bottom-navigation/issues"
-    },
-    "license": "Apache-2.0",
-    "homepage": "https://github.com/henrychavez/nativescript-bottom-navigation",
-    "repository": "https://github.com/henrychavez/nativescript-bottom-navigation",
-    "readmeFilename": "README.md",
-    "devDependencies": {
-        "@angular/common": "~7.1.0",
-        "@angular/compiler": "~7.1.0",
-        "@angular/compiler-cli": "~7.1.0",
-        "@angular/core": "~7.1.0",
-        "nativescript-angular": "~7.1.0",
-        "rxjs": "^6.3.3",
-        "tns-core-modules": "^5.1.0",
-        "tns-platform-declarations": "^5.1.1",
-        "tsickle": "^0.34.0",
-        "tslint": "~5.11.0",
-        "typescript": "~3.1.6",
-        "zone.js": "~0.8.26"
+  "name": "nativescript-bottom-navigation",
+  "version": "2.0.0",
+  "description": "NativeScript plugin to add a bottom navigation component for Android & iOS",
+  "main": "bottom-navigation-bar",
+  "typings": "index.d.ts",
+  "nativescript": {
+    "platforms": {
+      "android": "6.0.0",
+      "ios": "6.0.1"
     }
+  },
+  "scripts": {
+    "tsc": "npm i && tsc",
+    "ngc.clean": "find ./ angular/ -name '*.metadata.json' -delete",
+    "ngc": "npm run ngc.clean && node --max-old-space-size=8192 node_modules/.bin/ngc -skipLibCheck -p tsconfig.json",
+    "build": "npm run tsc && npm run ngc && npm run build.native",
+    "build.native": "node scripts/build-native.js",
+    "postclone": "npm i && node scripts/postclone.js",
+    "tslint": "cd .. && tslint \"**/*.ts\" --config tslint.json --exclude \"**/node_modules/**\"",
+    "ci.tslint": "npm i && tslint '**/*.ts' --config '../tslint.json' --exclude '**/node_modules/**' --exclude '**/platforms/**'",
+    "prepack": "npm run build.native",
+    "demo.ios": "npm run tsc && cd ../demo && tns run ios",
+    "demo.android": "npm run tsc && cd ../demo && tns run android",
+    "demo.reset": "cd ../demo && npx rimraf -- hooks node_modules platforms package-lock.json",
+    "demo-angular.ios": "npm run tsc && cd ../demo-angular && tns run ios",
+    "demo-angular.android": "npm run tsc && cd ../demo-angular && tns run android",
+    "demo-angular.reset": "cd ../demo-angular && npx rimraf -- hooks node_modules platforms package-lock.json",
+    "demo-vue.ios": "npm run tsc && cd ../demo-vue && tns run ios",
+    "demo-vue.android": "npm run tsc && cd ../demo-vue && tns run android",
+    "demo-vue.reset": "cd ../demo-vue && npx rimraf -- hooks node_modules platforms package-lock.json",
+    "plugin.prepare": "npm run build && cd ../demo && tns plugin remove nativescript-test && tns plugin add ../src && cd ../demo-angular && tns plugin remove nativescript-test && tns plugin add ../src",
+    "clean": "npm run demo.reset && npm run demo-angular.reset && npx rimraf -- node_modules package-lock.json && npm i"
+  },
+  "keywords": [
+    "NativeScript",
+    "JavaScript",
+    "Typescript",
+    "Android",
+    "iOS",
+    "Henry Chavez",
+    "Bytpher",
+    "Bottom Navigation",
+    "Material Design",
+    "Tab Navigation"
+  ],
+  "author": {
+    "name": "Henry Chavez",
+    "email": "[e-mail]"
+  },
+  "bugs": {
+    "url": "https://github.com/henrychavez/nativescript-bottom-navigation/issues"
+  },
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/henrychavez/nativescript-bottom-navigation",
+  "repository": "https://github.com/henrychavez/nativescript-bottom-navigation",
+  "readmeFilename": "README.md",
+  "devDependencies": {
+    "@angular/compiler": "^8.2.0",
+    "@angular/compiler-cli": "^8.2.0",
+    "@angular/core": "^8.0.0",
+    "nativescript-angular": "^8.0.0",
+    "prompt": "^1.0.0",
+    "rimraf": "^2.6.3",
+    "semver": "^5.6.0",
+    "tns-core-modules": "~6.0.0",
+    "tns-platform-declarations": "~6.0.0",
+    "tslint": "^5.18.0",
+    "typescript": "~3.4.5"
+  }
 }

README.md

@@ -1,10 +0,13 @@
-# Nativescript Bottom Navigation
+# Nativescript Material Bottom Navigation Bar
 
-Nativescript plugin for Android & iOS to have the Bottom Navigation bar following the Material Design Guidelines.
+Nativescript plugin for Android & iOS to have the Bottom Navigation Bar following the Material Design Guidelines.
 
 [![npm](https://img.shields.io/npm/v/nativescript-bottom-navigation.svg)](https://www.npmjs.com/package/nativescript-bottom-navigation) [![npm](https://img.shields.io/npm/dt/nativescript-bottom-navigation.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-bottom-navigation) [![Build Status](https://travis-ci.org/henrychavez/nativescript-bottom-navigation.svg?branch=master)](https://travis-ci.org/henrychavez/nativescript-bottom-navigation)
 
+> **IMPORTANT:** This package will be deprecated, this is the last release on this repository, the component will be moved to [nativescript-material-components](https://github.com/Akylas/nativescript-material-components)
+
 <img alt="iOS" src="screenshots/screenshot-ios.png" width="250">
 
 ## Contents
+
 1.  [Installation](#installation)
@@ -19,3 +22,3 @@ 2.  [Usage with Javascript](#usage)
 
-You need the version of NS3 or later to use this plugin.
+You need the version of NS6 or later to use this plugin.
 
@@ -28,6 +31,28 @@ ### Installation
 
-### Usage 
+if you want to use the plugin with NS5 and above use the version `1.5.1`
 
-Before start using the plugin you need to add the icons for android & iOS in your App_Resources directory.
+```javascript
+tns plugin add nativescript-bottom-navigation@1.5.1
+```
 
+### BREAKING CHANGES
+
+- `BottomNavigation` class now is `BottomNavigationBar`
+- `NativescriptBottomNavigationModule` now is `NativeScriptBottomNavigationBarModule`
+- `res://` should be used to reference icons in the tabs
+- The prefix `On` of the Event interfaces was removed:
+  - Example: `OnTabPressedEventData` now is `TabPressedEventData`
+- The prefix `tab` of Css properties was removed:
+  - Example: `tab-active-color` now is `active-color`
+- **The documentation was updated review it :D**
+
+### NEW FEATURES
+
+- `Badge` now are supported using the method: `showBadge(index, value)`
+  - NOTE: if you want to show a badge as a red dot no value should be passed to the function.
+
+### Usage
+
+Before start using the plugin you need to add the icons for android & iOS in your `App_Resources` directory.
+
 #### XML
@@ -39,16 +64,17 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd"
-      xmlns:bottomNav="nativescript-bottom-navigation"
+      xmlns:mdc="nativescript-bottom-navigation"
       loaded="pageLoaded"
       class="page">
-    <GridLayout columns="*"
-                rows="*, auto">
+    <GridLayout rows="*, auto">
         <StackLayout row="0">
             <Label text="content"></Label>
         </StackLayout>
-        <bottomNav:BottomNavigation tabs="{{ tabs }}"
-                                    activeColor="green"
-                                    inactiveColor="red"
-                                    backgroundColor="black"
-                                    loaded="bottomNavigationLoaded"
-                                    row="1"></bottomNav:BottomNavigation>
+        <mdc:BottomNavigationBar
+          tabs="{{ tabs }}"
+          activeColor="green"
+          inactiveColor="red"
+          backgroundColor="black"
+          tabSelected="tabSelected"
+          row="1"
+        ></mdc:BottomNavigationBar>
     </GridLayout>
@@ -58,32 +84,30 @@ </Page>
 
-```javascript
-import * as observable from 'tns-core-modules/data/observable';
-import * as pages from 'tns-core-modules/ui/page';
-import { BottomNavigation, BottomNavigationTab, OnTabSelectedEventData } from "nativescript-bottom-navigation";
+```typescript
+import { EventData } from 'tns-core-modules/data/observable';
+import { Page } from 'tns-core-modules/ui/page';
+import {
+  BottomNavigationTab,
+  TabSelectedEventData,
+} from 'nativescript-bottom-navigation';
 
 // Event handler for Page 'loaded' event attached in main-page.xml
-export function pageLoaded(args: observable.EventData) {
+export function pageLoaded(args: EventData) {
   // Get the event sender
-  let page = <pages.Page>args.object;
+  let page = <Page>args.object;
   page.bindingContext = {
-      tabs: [
-        new BottomNavigationTab('First', 'ic_home'),
-        new BottomNavigationTab('Second', 'ic_view_list'),
-        new BottomNavigationTab('Third', 'ic_menu')
-      ]
+    tabs: [
+      new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),
+      new BottomNavigationTab({
+        title: 'Second',
+        icon: 'res://ic_view_list',
+        isSelectable: false,
+      }),
+      new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' }),
+    ],
   };
 }
 
-export function bottomNavigationLoaded(args) {
-  let bottomNavigation: BottomNavigation = args.object;
-  // For some reason the tabSelected event doesn't work if you
-  // handle it from the view, so you need to handle the event in this way.
-  bottomNavigation.on('tabSelected', tabSelected);
-
-}
-
-export function tabSelected(args: OnTabSelectedEventData) {
+export function tabSelected(args: TabSelectedEventData) {
   console.log('tab selected ' + args.newIndex);
 }
-
 ```
@@ -95,19 +119,20 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd"
-      xmlns:bottomNav="nativescript-bottom-navigation"
+      xmlns:mdc="nativescript-bottom-navigation"
       loaded="pageLoaded"
       class="page">
-    <GridLayout columns="*"
-                rows="*, auto">
+    <GridLayout rows="*, auto">
         <StackLayout row="0">
             <Label text="content"></Label>
         </StackLayout>
-        <bottomNav:BottomNavigation activeColor="green"
-                                    inactiveColor="red"
-                                    backgroundColor="black"
-                                    loaded="bottomNavigationLoaded"
-                                    row="1">
-            <bottomNav:BottomNavigationTab title="First" icon="ic_home"></bottomNav:BottomNavigationTab>
-            <bottomNav:BottomNavigationTab title="Second" icon="ic_view_list"></bottomNav:BottomNavigationTab>
-            <bottomNav:BottomNavigationTab title="Third" icon="ic_menu"></bottomNav:BottomNavigationTab>
-        </bottomNav:BottomNavigation>
+        <mdc:BottomNavigationBar
+          activeColor="green"
+          inactiveColor="red"
+          backgroundColor="black"
+          tabSelected="tabSelected"
+          row="1"
+        >
+          <mdc:BottomNavigationTab title="First" icon="res://ic_home" />
+          <mdc:BottomNavigationTab title="Second" icon="res://ic_view_list" isSelectable="false" />
+          <mdc:BottomNavigationTab title="Third" icon="res://ic_menu" />
+        </mdc:BottomNavigationBar>
     </GridLayout>
@@ -117,35 +142,12 @@ </Page>
 
-```javascript
-import * as observable from 'tns-core-modules/data/observable';
-import * as pages from 'tns-core-modules/ui/page';
-import { BottomNavigation, BottomNavigationTab, OnTabSelectedEventData } from "nativescript-bottom-navigation";
-
-// Event handler for Page 'loaded' event attached in main-page.xml
-export function pageLoaded(args: observable.EventData) {
-  // Get the event sender
-  let page = <pages.Page>args.object;
-}
-
-export function bottomNavigationLoaded(args) {
-  let bottomNavigation: BottomNavigation = args.object;
-  bottomNavigation.on('tabSelected', tabSelected);
-
-}
-
-export function tabSelected(args: OnTabSelectedEventData) {
-  console.log('tab selected ' + args.newIndex);
-}
-
-```
-
 #### Angular
 
-First you need to include the `NativescriptBottomNavigationModule` in your app.module.ts
+First you need to include the `NativeScriptBottomNavigationBarModule` in your `app.module.ts``
 
-```javascript
-import { NativescriptBottomNavigationModule} from "nativescript-bottom-navigation/angular";
+```typescript
+import { NativeScriptBottomNavigationBarModule} from "nativescript-bottom-navigation/angular";
 
 @NgModule({
     imports: [
-        NativescriptBottomNavigationModule
+        NativeScriptBottomNavigationBarModule
     ],
@@ -156,68 +158,51 @@ ...
 
-As the examples in the Javascript/Typescript version you can use the `tabs` property to set the BottomNavigationTabs
-
-```xml
+```html
 <GridLayout rows="*, auto">
-    <StackLayout row="0">
-       <Label text="content"></Label>
-    </StackLayout>
-    <BottomNavigation [tabs]="tabs"
-                      activeColor="red"
-                      inactiveColor="yellow"
-                      backgroundColor="black"
-                      (tabSelected)="onBottomNavigationTabSelected($event)"
-                      (tabPressed)="onBottomNavigationTabPressed($event)"
-                      row="1"></BottomNavigation>
+  <StackLayout row="0">
+    <label text="content"></label>
+  </StackLayout>
+  <BottomNavigationBar
+    [tabs]="tabs"
+    activeColor="red"
+    inactiveColor="yellow"
+    backgroundColor="black"
+    (tabSelected)="onBottomNavigationTabSelected($event)"
+    (tabPressed)="onBottomNavigationTabPressed($event)"
+    row="1"
+  ></BottomNavigationBar>
 </GridLayout>
 ```
 
-or you can declare the BottomNavigationTabs in your html directly
+or you can declare the `BottomNavigationTab` in your html directly
 
-```xml
+```html
 <GridLayout rows="*, auto">
-    <StackLayout row="0">
-       <Label text="content"></Label>
-    </StackLayout>
-    <BottomNavigation activeColor="red"
-                      inactiveColor="yellow"
-                      backgroundColor="black"
-                      (tabSelected)="onBottomNavigationTabSelected($event)"
-                      (tabPressed)="onBottomNavigationTabPressed($event)"
-                      row="1">
-        <BottomNavigationTab title="First" icon="ic_home"></BottomNavigationTab>
-        <BottomNavigationTab title="Second" icon="ic_view_list"></BottomNavigationTab>
-        <BottomNavigationTab title="Third" icon="ic_menu"></BottomNavigationTab>
-    </BottomNavigation>
+  <StackLayout row="0">
+    <label text="content"></label>
+  </StackLayout>
+  <BottomNavigationBar
+    activeColor="red"
+    inactiveColor="yellow"
+    backgroundColor="black"
+    (tabSelected)="onBottomNavigationTabSelected($event)"
+    (tabPressed)="onBottomNavigationTabPressed($event)"
+    row="1"
+  >
+    <BottomNavigationTab
+      title="First"
+      icon="res://ic_home"
+    ></BottomNavigationTab>
+    <BottomNavigationTab
+      title="Second"
+      icon="res://ic_view_list"
+      [isSelectable]="false"
+    ></BottomNavigationTab>
+    <BottomNavigationTab
+      title="Third"
+      icon="res://ic_menu"
+    ></BottomNavigationTab>
+  </BottomNavigationBar>
 </GridLayout>
 ```
 
-```javascript
-import { Component, OnInit } from "@angular/core";
-import { BottomNavigation, BottomNavigationTab, OnTabPressedEventData, OnTabSelectedEventData } from 'nativescript-bottom-navigation';
-
-@Component(
-  {
-    selector: "ns-app",
-    moduleId: module.id,
-    templateUrl: "./app.component.html",
-  }
-)
-export class AppComponent {
-
-  public tabs: BottomNavigationTab[] = [
-    new BottomNavigationTab('First', 'ic_home'),
-    new BottomNavigationTab('Second', 'ic_view_list'),
-    new BottomNavigationTab('Third', 'ic_menu')
-  ];
-
-  onBottomNavigationTabPressed(args: OnTabPressedEventData): void {
-    console.log(`Tab pressed:  ${args.index}`);
-  }
-
-  onBottomNavigationTabSelected(args: OnTabSelectedEventData): void {
-    console.log(`Tab selected:  ${args.oldIndex}`);
-  }
-}
-```
-
 #### Vue
@@ -228,23 +213,29 @@
 ```javascript
-import BottomNavigation from 'nativescript-bottom-navigation/vue';
+import BottomNavigationBar from 'nativescript-bottom-navigation/vue';
 
-Vue.use(BottomNavigation)
+Vue.use(BottomNavigationBar);
 ```
 
-This will install and register `BottomNavigation` and `BottomNavigationTab` components to your `Vue` instance and now you can use the plugin as follows:
+This will install and register `BottomNavigationBar` and `BottomNavigationTab` components to your `Vue` instance and now you can use the plugin as follows:
 
-```xml
+```html
 <GridLayout rows="*, auto">
-    <StackLayout row="0">
-       <Label text="content"></Label>
-    </StackLayout>
-    <BottomNavigation activeColor="red"
-                      inactiveColor="yellow"
-                      backgroundColor="black"
-                      @tabSelected="onBottomNavigationTabSelected"
-                      row="1">
-        <BottomNavigationTab title="First" icon="ic_home" />
-        <BottomNavigationTab title="Second" icon="ic_view_list" />
-        <BottomNavigationTab title="Third" icon="ic_menu" />
-    </BottomNavigation>
+  <StackLayout row="0">
+    <label text="content"></label>
+  </StackLayout>
+  <BottomNavigationBar
+    activeColor="red"
+    inactiveColor="yellow"
+    backgroundColor="black"
+    @tabSelected="onBottomNavigationTabSelected"
+    row="1"
+  >
+    <BottomNavigationTab title="First" icon="ic_home" />
+    <BottomNavigationTab
+      title="Second"
+      icon="ic_view_list"
+      isSelectable="false"
+    />
+    <BottomNavigationTab title="Third" icon="ic_menu" />
+  </BottomNavigationBar>
 </GridLayout>
@@ -257,9 +248,9 @@ ```
 
-You can also use your css file to set or change the activeColor, inactiveColor & backgroundColor of the Bottom Navigation.
+You can also use your css file to set or change the `activeColor`, `inactiveColor` & `backgroundColor` of the Bottom Navigation Bar.
 
 ```css
 .botom-nav {
-    tab-active-color: green;
-    tab-inactive-color: black;
-    tab-background-color: blue;
+  active-color: green;
+  inactive-color: black;
+  background-color: blue;
 }
@@ -270,50 +261,54 @@ ```
 
-1. [BottomNavigation](#bottom-navigation)
+1. [BottomNavigationBar](#bottom-navigation-bar)
 2. [BottomNavigationTab](#bottom-navigation-tab)
 
-** properties (bindable) = properties settable thew XML/HTML
-** events = event properties settable thew XML/HTML
-** properties (internal) = properties settable thew JS/TS instance
+- **Properties (bindable):** Properties settable through XML/HTML
+- **Properties (internal):** Properties accessible through JS/TS instance
+- **Events:** Event properties settable thew XML/HTML
 
-# Bottom Navigation
+# Bottom Navigation Bar
 
 #### Properties (bindable)
 
-| Property | Required | Default | Type | Description |
-| --- | --- | --- | --- | --- |
-| tabs | true | null | `Array<BottomNavigationTab>` | Array containing the tabs for the BottomNavigation |
-| titleVisibility | false | "selected" | `"selected" | "always" | "never"` | Title Visibility for each BottomNavigationTab  |
-| activeColor | false | "blue" | `String` | Color of the BottomNavigationTab when it's selected  |
-| inactiveColor | false | "gray" | `String` | Color of the BottomNavigationTab when it's not selected  |
-| backgroundColor | false | "white" | `String` | Color of the BottomNavigation background  |
+| Property        | Required | Default                     | Type                         | Description                                             |
+| --------------- | -------- | --------------------------- | ---------------------------- | ------------------------------------------------------- |
+| tabs            | true     | []                          | `Array<BottomNavigationTab>` | Array containing the tabs for the BottomNavigationBar   |
+| titleVisibility | false    | `TitleVisibility.Selected` | `TitleVisibility`            | Title Visibility for each BottomNavigationTab           |
+| activeColor     | false    | "black"                     | `String`                     | Color of the BottomNavigationTab when it's selected     |
+| inactiveColor   | false    | "gray"                      | `String`                     | Color of the BottomNavigationTab when it's not selected |
+| backgroundColor | false    | "white"                     | `String`                     | Color of the BottomNavigation background                |
 
-#### Events
+#### Properties (internal)
 
-| Property | Required | Default | Type | Description |
-| --- | --- | --- | --- | --- |
-| tabSelected | false | null | `function ($event: OnTabSelectedEventData) {}` | Function fired every time the user select a new tab that receive an event object |
-| tabReselected | false | null | `function ($event: OnTabReselectedEventData) {}` | Function fired every time the user select a tab that is already selected and receive an event object |
-| tabPressed | false | null | `function ($event: OnTabPressedEventData) {}` | Function fired every time the user tap a tab with `selectable: false` that receive an event object |
+| Property         | Default                     | Type              | Description                                             |
+| ---------------- | --------------------------- | ----------------- | ------------------------------------------------------- |
+| selectedTabIndex | 0                           | `Number`          | Index of the selected tab                               |
+| titleVisibility  | `TitleVisibility.Selected` | `TitleVisibility` | Title Visibility for each BottomNavigationTab           |
+| activeColor      | "black"                     | `String`          | Color of the BottomNavigationTab when it's selected     |
+| inactiveColor    | "gray"                      | `String`          | Color of the BottomNavigationTab when it's not selected |
+| backgroundColor  | "white"                     | `String`          | Color of the BottomNavigation background                |
 
-#### Properties (internal)
+#### Events
 
-| Property | Required | Default | Type | Description |
-| --- | --- | --- | --- | --- |
-| selectedTabIndex | true | 0 | `Number` | Index of the selected tab |
+| Name          | Type                                   | Description                                                              |
+| ------------- | -------------------------------------- | ------------------------------------------------------------------------ |
+| tabPressed    | `(args: TabPressedEventData): void`    | Function fired every time the user tap a tab with `isSelectable: false`  |
+| tabSelected   | `(args: TabSelectedEventData): void`   | Function fired every time the user select a new tab                      |
+| tabReselected | `(args: TabReselectedEventData): void` | Function fired every time the user select a tab that is already selected |
 
 #### Methods
 
-| Property | Type | Description |
-| --- | --- | --- |
-| `selectTab(index: number)` | `Void` | Select a tab programmatically |
-| `createTabs(tabs: BottomNavigationTab[])` | `Void` | Create the tabs programmatically |
+| Property                                   | Type   | Description                      |
+| ------------------------------------------ | ------ | -------------------------------- |
+| `selectTab(index: number)`                 | `void` | Select a tab programmatically    |
+| `showBadge(index: number, value?: number)` | `void` | Show a badge for an specific tab |
 
 # Bottom Navigation Tab
 
-#### Properties (internal)
+#### Properties (bindable)
 
-| Property | Required | Default | Type | Description |
-| --- | --- | --- | --- | --- |
-| title | true | null | `String` | Title of the tab |
-| icon | true | null | `String` | Icon of the tab  |
-| selectable | false | true | `Boolean` | Determine if the tab can be selected or not (The `tabSelected` event still be fired)  |
+| Property     | Required | Default | Type      | Description                                 |
+| ------------ | -------- | ------- | --------- | ------------------------------------------- |
+| title        | true     | null    | `string`  | Title of the tab                            |
+| icon         | true     | null    | `string`  | Icon of the tab                             |
+| isSelectable | false    | true    | `boolean` | Determine if the tab can be selected or not |

references.d.ts

@@ -0,2 +1,7 @@
+// MDC declarations
+/// <reference path="./declarations/mdc.ios.d.ts" />
+/// <reference path="./declarations/mdc.android.d.ts" />
+
+// Platform declarations
 /// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
 /// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />

vue/index.js

@@ -5,5 +5,6 @@ "use strict";
     install: function (Vue) {
-        Vue.registerElement('BottomNavigation', function () { return require('../').BottomNavigation; });
+        Vue.registerElement('BottomNavigationBar', function () { return require('../').BottomNavigationBar; });
         Vue.registerElement('BottomNavigationTab', function () { return require('../').BottomNavigationTab; });
     },
 };
+//# sourceMappingURL=index.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 3 instances in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

665823

increased by636.86%

Dev dependency count

11

decreased by-8.33%

Number of package files

53

increased by55.88%

Lines of code

10353

increased by1543.33%

Worsened metrics

Number of lines in readme file

305

decreased by-1.61%

Number of medium supply chain risk alerts

4

increased byInfinity%

No dependency changes