Ion tabs not working


#1

Hi All -

I am trying to create an ionic app and have hit a roadblock with the tab implementation.

I have a view with 3 tabs in it. One of the tabs’s view has some content and a button.

<ion-view view-title="{{ course.title }}">
    <ion-tabs class="tabs-icon-top">
        <!-- Course details go here -->
        <ion-tab icon="ion-home" title="Details">
            <ion-nav-view name="course-home">   
                <ion-content>
<!--The button is here which open another view using a href.-->
                </ion-content>
            </ion-nav-view>
        </ion-tab>
        
        <!-- Course reviews go here -->
        <ion-tab icon="ion-star" title="Reviews">
            <ion-nav-view name="course-reviews">
                 <ion-content>
                </ion-content>
            </ion-nav-view>
        </ion-tab>
        
        <!-- Course batches go here -->
        <ion-tab icon="ion-filing" title="Batches">
            <ion-nav-view name="course-batches"> 
                <ion-content>
                </ion-content>
            </ion-nav-view>
        </ion-tab>
        
    </ion-tabs>
</ion-view>

Now the view, I am trying to opne on the button click doesn’t open up (no error on console as well) if it has tabs. If i remove the tabs from with-in the view then it all works fine. Sample code from the view I am trying to open is

<ion-view view-title="{{ provider.title }}">
    <ion-tabs class="tabs-icon-top">
        <ion-tab icon="ion-home" title="Details">
            <ion-nav-view name="provider-home">
                <ion-content>                    
                </ion-content>
            </ion-nav-view>
        </ion-tab>
        <ion-tab icon="ion-home" title="Details">
            <ion-nav-view name="provider-review">
                <ion-content>
                    
                </ion-content>
            </ion-nav-view>
        </ion-tab>
    </ion-tabs>
       
</ion-view>

Please advice asap if What I am trying to do is valid and if yes, how can this be achieved.

-Thanks.


#2

You don’t share enough code but at first I would say that ion-tabs should not be defined in <ion-vew>.
Have a look at the starter tabs app, you must define an abstract state which has a template containing the tabs and your tab states must be nested states of this abstract state.


#3

you first statement was incomplete towards the end, so I take it that you meant tabs should not be defined inside ion-view.
I will look at the example and correct my implementation.

Thanks again for your swift reply and will get back once I have the right implementation with me.


#4

Right I forgot about tag formatting in post, it’s fixed now


#5

I found a thread discussing the exact same problem as I have … https://github.com/driftyco/ionic/issues/437… . I am guessing this has not been fixed even in the current version of ionic…