How to insert tabs inside ion content in Ionic

Question

Always using the awesome framework Ionic for developing my mobile application. everything seems to work fine.

I want to add something particular to my app. I want to have tabs inside a ion-content.

I'm using button bar tabs. I'm not sure if this is the right solution or no.

I want to also let you know that I'm using already tabs tool in my app, so in my app.js I do have some code for navigating tabs. So I don't know how I would be able to add another one for another page.

My code :

CODEPEN

Here is what I want :

Screenshot of what I want

Here some of my code :

<body>
<div> 
<ion-header-bar class="bar-stable">
     <button class="button button-clear button-positive" href="index.html">Retour</button>

      <h1 class="title">Détails</h1>

    </ion-header-bar>
<ion-content>

  <div class="item item-divider" style="height:45px">
      <div style="display:inline-block;  left:10px; position:absolute;">
   <h5>Competiton</h5>
   <h5>14th journey</h5>
          </div>
        <div style="display:inline-block;  right:10px; position:absolute;">
   <h5>25 MAI 2015</h5>
            <h5>18:00</h5>
          </div>
  </div>
  <div class="item item-text-wrap" style="height:100px">
   <img src="http://upload.wikimedia.org/wikipedia/en/6/6a/Zte_Football_Club_Logo_90.png" style="width:55px; height:55px; position:absolute; left:10px; top:12px">
      <img src="http://upload.wikimedia.org/wikipedia/en/6/6a/Zte_Football_Club_Logo_90.png" style="width:55px; height:55px; position:absolute; right:10px; top:12px" >
      <h4 style="position:absolute; left:10px; top:70px">ASROME</h4> <h4 style="position:absolute; right:10px; top:70px">LAZIO</h4>
      <h4 style="position:absolute; left:150px; top:35px">3</h4> <h4 style="position:absolute; right:150px; top:35px">2</h4>
  </div>

<div class="button-bar">
<a class="button" tab-state ui-sref="home">Résumé</a>
  <a class="button" tab-state ui-sref="contact">Composition</a>

</div>

  </div>
  </body>

hey did u get any solution?.. – Lakshay Jul 02 '15 at 04:43 — Lakshay, Jul 02 '15 at 04:43
the question same with @Lakshay, did u get any solution ? – Jet Geng Aug 09 '15 at 08:47 — Jet Geng, Aug 09 '15 at 08:47

Grégoire Motot · Answer 1 · 2017-01-28T17:42:44.077

23

I had the same problem, I fixed it like this.

<ion-view view-title="Tabs">
    <ion-pane>
        <ion-tabs class="tabs-top">

            <!-- Tab 1 -->
            <ion-tab title="Tab 1" href="#/tab/tab1">
                <ion-nav-view name="tab-tab1">
                    <ion-content>
                        Tab 1 content
                    </ion-content>

                </ion-nav-view>
            </ion-tab>


            <!-- Tab 2 -->
            <ion-tab title="Tab 2" href="#/tab/tab2">
                <ion-nav-view name="tab-tab2">
                    <ion-content>
                        Tab 2 content
                    </ion-content>
                </ion-nav-view>
            </ion-tab>
        </ion-tabs>

    </ion-pane>
</ion-view>

edited Jan 28 '17 at 17:42

answered Jul 19 '15 at 22:15

Grégoire Motot

881
7
10

9

You saved me from a lot of `` ;) – Cody Jan 17 '16 at 06:39
@Gregoire Motot I have a doubt is it possible to put ion tabs into div tag so that i can make use of it just for half of my page to be tabs and others to be button like that any idea – Mohan Gopi May 23 '16 at 12:07
1

Worked for me too, nice solution – Absar Hasan Aug 17 '16 at 11:04

Camilo Soto · Answer 2 · 2018-04-14T12:09:57.617

6

You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app.

For your solution you must use segments.

http://ionicframework.com/docs/api/components/segment/Segment/

edited Apr 14 '18 at 12:09

answered Jun 22 '17 at 23:36

Camilo Soto

349
5
11

I delete my answer when I saw yours... That's the way :) – Carlos Galeano Jul 18 '17 at 20:01

Olga Akhmetova · Answer 3 · 2016-08-03T11:25:41.037

3

As says Ionic documentation

Note: do not place ion-tabs inside of an ion-content element; it has been known to cause a certain CSS bug.

edited Aug 03 '16 at 11:25

answered Oct 19 '15 at 09:17

Olga Akhmetova

480
7
19

2

this is not an answer! – Braian Mellor Aug 02 '16 at 21:57
2

@BraianMellor I think it is. What OP wants does not fit into the paradigm of Ionic and the documentation says it clearly. – Olga Akhmetova Aug 03 '16 at 06:41
"we should find another way" is a comment. An answer is an answer for the problem, this just put a problem into the problem, an answer should be something like this https://codepen.io/leoz/pen/gpMMmW?editors=1010 – Braian Mellor Aug 03 '16 at 10:34
@BraianMellor I deleted my comment because it can be misleading but the rest of my answer is correct. Question was "How to insert tabs inside ion content in Ionic", answer is "in no way, because documentation says do not place ion-tabs inside of an ion-content element". – Olga Akhmetova Aug 03 '16 at 11:31
1

And i think that's not a complete answer Olga. A complete answer should have a way to solve that, like the link I gave you. I understand what are you saying but that is not helping to solve the problem, that's just saying "that's not the way", so WHAT IS THE WAY??? that should be the answer ;) let me help you here http://stackoverflow.com/help/how-to-answer. And remember, we are here to help to solve problem – Braian Mellor Aug 03 '16 at 11:36

How to insert tabs inside ion content in Ionic

3 Answers3