POSTED IN Ionic Ionic 2

ionic 3 customized tabs

ionic 3 customized tabs

ionic allowing to add customized tabs. Normally ionic framework having in build tab functionalities. By using that we can add number of tabs. Sometimes we need more tabs which is like showing menus in popover controller. By clicking tab it will shows the menus in pop up. If we want to do like that we need to customized menus. Lets see how to achieve this.

Step 1 : Create Ionic 3 tabs project

The above comment will create ionic 3 projects with tbs concepts.

cd ./project-name

 ionic serve  to test your applications in browser.

Step 2 : Create Popverpage

Step 3 : Create Settings Page

Step 4 : Create Profile Page

Import all above 3 pages in app.modules.ts



Step 5: Add new tabs in tabs.html

Import your new menus in tabs page.

tabs.ts

  1. Add ID in your tabs.html and mark that id as @ViewChild(‘customizedTab’) tabRef: Tabs;
  2. presentPopover() function is used to open the popover page.

tabs.html

  1. Added ID in ion-tabs ex <ion-tabs #customizedTab>
  2. Added your tab where you want to show you more menus. Here I have added tab and onclick triggered presentPopover($event) function.
  3. Add your required menus in hidden state (show= “false”). 

Step 6 : Update your popover controller and popover html

popover.html

  1. Declare your required menus here.
  2. Here 4, 5 are mentions the tab names in tabs.ts

popover.ts

  1. Import Tabs page store in variable
  2. openPage() function will get tab number and get the reference of tab name from tabsPageRef object.
  3. this.viewCtrl.dismiss(); is used to dismiss the popover page when we enters into another page.

That’s it now you can add any numbers of menus in this way.

Happy coding.

Thanks!.