Nativescript-bubble-navigation NPM

Nativescript Bubble Navigation

Overview

Nativescript Bubble Navigation is a navigation tab plugins which provides beautiful navigations.

Installation

tns plugin add nativescript-bubble-navigation

Usage

TypeScript

xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" class="page" 
  xmlns:ui="nativescript-bubble-navigation">
  <GridLayout rows="* auto" colunms="*" backgroundColor="{{ bg }}">
    <StackLayout row="0" class="p-20">
      <Label class="h2" color="white" horizontalAlignment="center" text="{{ title }}"/>
    </StackLayout>
    <ui:BubbleNavigation row="1" tabs="{{ tabs }}" loaded="onBubbleNavigationLoaded" padding="12" tabBackgroundColor="white" elevation="8"/>
  </GridLayout>
</Page>

main-page.ts

import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import { HelloWorldModel } from './main-view-model';
import { BubbleNavigation, OnTabSelectedEventData } from 'nativescript-bubble-navigation';
let vm = new HelloWorldModel();

// 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;
    page.bindingContext = vm;
}

export function onBubbleNavigationLoaded(args) {
    let folding: BubbleNavigation = args.object;
    folding.on('tabSelected', tabSelected);
}

export function tabSelected(args: OnTabSelectedEventData) {
    vm.set('title', args.name.toUpperCase() + ' TAB!');
    vm.set('bg', vm.tabs[args.position].colorInactive);

    console.log('tab selected ' + args.name + ' at position ' + args.position);
}

main-view-model.ts

import { Observable } from 'tns-core-modules/data/observable';
import { BubbleNavigationItem } from 'nativescript-bubble-navigation';

export class HelloWorldModel extends Observable {
  public title: string = 'HOME TAB!';
  public bg: string = '#e57373';
  public tabs: BubbleNavigationItem[];

  constructor() {
    super();

    this.tabs = [
      new BubbleNavigationItem('Home', 'ic_home', '#f44336', '#e57373'),
      new BubbleNavigationItem('Search', 'ic_search', '#03a9f4', '#64b5f6'),
      new BubbleNavigationItem('Likes', 'ic_like', '#607d8b', '#90a4ae'),
      new BubbleNavigationItem('Notify', 'ic_playlist', '#4caf50', '#81c784')
    ];
  }
}

Angular

app.module.ts

import { BubbleNavigationModule } from "nativescript-bubble-navigation/angular";

@NgModule({
    imports: [
        BubbleNavigationModule
    ],
    ...
})

your.component.ts

import { Component, OnInit } from "@angular/core";
import { OnTabSelectedEventData, BubbleNavigationItem } from 'nativescript-bubble-navigation';

@Component({
  ...
})
export class YourComponent implements OnInit {
    public title: string = 'HOME TAB!';
    public bg: string = '#e57373';
    public tabs: BubbleNavigationItem[];

    constructor() {
        this.tabs = [
            new BubbleNavigationItem('Home', 'ic_home', '#f44336', '#e57373'),
            new BubbleNavigationItem('Search', 'ic_search', '#03a9f4', '#64b5f6'),
            new BubbleNavigationItem('Likes', 'ic_like', '#607d8b', '#90a4ae'),
            new BubbleNavigationItem('Notify', 'ic_playlist', '#4caf50', '#81c784')
        ];
    }

    ngOnInit(): void {
        ...
    }

    onBubbleNavigationTabSelected(args: OnTabSelectedEventData): void {
        this.title = args.name.toUpperCase() + ' TAB!';
        this.bg = this.tabs[args.position].colorInactive;

        console.log('tab selected ' + args.name + ' at position ' + args.position);
    }
}

your.component.html

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<GridLayout rows="* auto" colunms="*" [backgroundColor]="bg">
    <StackLayout row="0" class="p-20">
        <Label class="h1" color="white" horizontalAlignment="center" [text]="title"></Label>
    </StackLayout>

    <BubbleNavigation (tabSelected)="onBubbleNavigationTabSelected($event)" row="1" [tabs]="tabs"
        loaded="onBubbleNavigationLoaded" padding="12" tabBackgroundColor="white" elevation="8"></BubbleNavigation>
</GridLayout>

Vue

app.js

import BubbleNavigation from "nativescript-bubble-navigation/vue";

Vue.use(BubbleNavigation);

new Vue({
  ...
}).$start();

your-component.vue

<template>
  <Page class="page">
    <ActionBar class="action-bar">
      <Label class="action-bar-title" text="Home"></Label>
    </ActionBar>
    <GridLayout rows="* auto" colunms="*" :backgroundColor="bg">
      <StackLayout row="0" class="p-20">
        <Label class="h1" color="white" horizontalAlignment="center" :text="title"></Label>
      </StackLayout>

      <BubbleNavigation
        @tabSelected="onBubbleNavigationTabSelected"
        row="1"
        :tabs="tabs"
        padding="12"
        tabBackgroundColor="white"
        elevation="8"
      />
    </GridLayout>
  </Page>
</template>

<script>
import { OnTabSelectedEventData, BubbleNavigationItem } from 'nativescript-bubble-navigation';

export default {
    data() {
        return {
            tabs: [
              new BubbleNavigationItem('Home', 'ic_home', '#f44336', '#e57373'),
              new BubbleNavigationItem('Search', 'ic_search', '#03a9f4', '#64b5f6'),
              new BubbleNavigationItem('Likes', 'ic_like', '#607d8b', '#90a4ae'),
              new BubbleNavigationItem('Notify', 'ic_playlist', '#4caf50', '#81c784')
            ],
            title: 'HOME TAB!',
            bg: '#e57373',
        }
    },
    methods: {
        onBubbleNavigationTabSelected(args) {
            this.title = `${args.name.toUpperCase()} TAB!`;
            this.bg = this.tabs[args.position].colorInactive;
            console.log('tab selected ' + args.name + ' at position ' + args.position);
        }
    }
};
</script>

API

BubbleNavigation

Properties

Property	Type	Description
tabs	`Array<BubbleNavigationItem>`	Array containing the tabs for the BubbleNavigation
padding	`number`	Set Bubble Tab padding
tabBackgroundColor	`string`	Set Tab Bar Background Color
elevation	`number`	Set tab elevation/ shadow

Events

Property	Type	Description	Platforms
tabSelected	`function ($event: OnTabSelectedEventData) {}`	Event get trigger every time the user select a new tab that receive an event object

Methods

Property	Type	Description	Platforms
`selectTab(index: number)`	`Void`	Select a tab programmatically

BubbleNavigationItem

Properties

Property	Type	Description
title	`string`	Select a tab title
icon	`string`	Select a tab icon
colorActive	`color`	Select a active color, the color of the tab when it's selected
colorInactive	`color`	Select a active color, the color of the tab when it isn't selected