Adding new tabs in ionic framework

Question

I want to use a tab layout in my ionic framework, so I started making it. By default it provides me 3 tabs, but now I want to add more tabs to it.

I did it by making changes in the tabs folder and "tab.html" file. Now I want to do coding of the new tab pages which I just added in "tabs.html". So for this I created new folders of the new tabs inside the pages folder. Now I want to code the new tabs I have added.

My question is how to do this. I tried by making new html file inside the folder of that page. But that gave me an error..

Please suggest me the solution as I am very new to ionic framework.

What was the error message? Also, can you show some code (to better see what you tried)? — Gabriel Lovetro, May 09 '17 at 17:34
above is the code of my tabs.html file.Now when i want to add new folder for the new tabs,how should i do that??and what is the meaning of — vithika, May 10 '17 at 04:41
That tag controls the root template for that tab. Basically, you would create new tab roots and name them whatever you want, then put those names in the ` — Gabriel Lovetro, May 10 '17 at 11:22
@vithika Try this https://ionicframework.com/docs/components/#slides — core114, Dec 27 '17 at 09:13

score 1 · Accepted Answer · answered May 10 '17 at 11:34

1

According to the Ionic docs, the way to create a new tab is:

1) Adding the <ion-tab> tag to the HTML. For example:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1"></ion-tab>
  //...
  <ion-tab [root]="myTabRoot" tabTitle="myTitle"></ion-tab>
</ion-tabs>

2) Create the new root page like you would any new page. For example:

export class myRootPage {
  constructor() {
  }
}

3) Assign the root page attribute to the root page itself inside the Tabs module. For example:

export class Tabs {
  myTabRoot = myRootPage;
  constructor() {
  }
}

Note that you will need to import your tab root page into the Tabs module (using the import{} command). As for how you create a new page, I assume you already know all the steps - if you don't, there are many tutorials online that should help you.

answered May 10 '17 at 11:34

Gabriel Lovetro

410
7
9

Where do i need to code for the second step,which file? export class myRootPage { constructor() { } } – vithika May 11 '17 at 17:45
You need to create a new TypeScript (.ts) file. Using the myRootPage as an example, you'd create a "my-root-page.ts" file and then you'd put the myRootPage code inside it. Of course, you also need to import the proper Ionic and Angular components for it to work - if you want to, you can copy one of the existing files for the other tab's root pages and just modify its title (and contents). It's easier than creating a page from nothing. – Gabriel Lovetro May 11 '17 at 17:52
1

I am able to create new tabs .thanks a lot.it solved my problem – vithika May 12 '17 at 09:24
No problem! Be sure to approve my answer later! – Gabriel Lovetro May 12 '17 at 11:05
1

Yeah i dont have much reputation now,but i have already upvoted it .Thank you so much. – vithika May 12 '17 at 12:48

score 1 · Answer 2 · answered May 12 '17 at 09:28

1

I referred to ionicframwork.docs//intro/tutorial/project-structure/ This tutorial fully explain the ionic structure and is very helpful to the beginner like me. It explains how to add new tabs to your app.

answered May 12 '17 at 09:28

vithika

213
1
5
16

Adding new tabs in ionic framework

2 Answers2