BottonBar Angular4 Component

This component try to fulfill the material design specification of the bottom bar but as a angular component

Dependecies :

Boostrap 4

Font-awesome

How to use :

Uploading to npm in progress...(Soon available)

First we need to import our component in our app.module

TODO Add Documentation to this part , when the package on npm is ready

Prepare the nav-items you want to use in the botton-bar if we follow the specification we should use between 3 and 5 items.

For creating the items , we have to create and array of NavTab.

    export interface NavTab {
      title: string; //title of the item , example : 'facebook'
      icon: string;  //icon of the item , example :'fa-facebook'
      link: string;  // link to the route we want to go example :'/example'
      state:string;  // None or Only one of the components should have the state 'active'
      backgroundColor:string; // This is the background color that the bottonBar will have once the NavTab is press
    }
    

Once we have our Array of NavTabs prepare , we can procedure to use our component

Example :

<router-outlet></router-outlet> <!-- Important , other wise the route won't work -->

<bottom-nav [tabs]="OurTabsArray"></bottom-nav>

And we are ready to go 😊

Configuration :

Things can be configurated :

There exists this optional inputs for the component :

initialColor : string , this will be the initial color on case none active navTab is active

showTextInCaseMore3Elements : boolean , this variable will say when the text should be display in case the bottom bar contains more than 3 elements

Example :

<router-outlet></router-outlet>
<bottom-nav [tabs]="tabs" [initialColor]="'red'" [showTextInCaseMore3Elements]="true"></bottom-nav>

Example :

Just download this repo , and try ng serve , the app appearing in the pics will be ready to use and see how the component works, feel free to play with the code 😄

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Do you want to help ?

I am kind of novice to angular , probably the code can be done in a better way so feel free to do a pull request if you want to improve the component.

Here some of the improvements that i though it can be done :

• In case that the size of the screen is bigger or equal to a tablet , display the botton bar in one lateral like the specification says

• The animations can be improve , specially when the option to not display text if more than 3 elements is active.

• Add Ripple effect , the original in android has a ripple effect on the botton bar each time the nav-item is change , there is no component (or at least i didn't find) on internet that imitates this behaviour for boostrap 4