CODEWITHSUNDEEP
angularjsionic-framework
Mulgard
Mulgard

Reputation: 10569

Can't get ion-tabs working

I tried to set up tabs like in this example but as you can see there no content is shown. I do:

<ion-nav-bar class="bar-positive">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view>
    <ion-nav-buttons side="right">
        <button class="button" ng-click="done()">
            Done
        </button>
    </ion-nav-buttons>
</ion-nav-view>
<ion-tabs class="tabs-positive tabs-icon-only">

    <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
        Content of One
    </ion-tab>

    <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
        Content of Two
    </ion-tab>

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
        Content of Three
    </ion-tab>

</ion-tabs>

And if i select Home Content of One is not showing up. I just copied the code from the official side: Ionic ion-tabs. Also my ion-nav-buttons are not showing up in the ion-nav-bar.

What is wrong with my code?

Is it possible to get the tabs to the top of the screen? i dont want the bottom i want them top. I also need to change the color and transparency if possible.

Upvotes: 1

Views: 3906

Answers (2)

LeftyX
LeftyX

Reputation: 35587

As Bipin Bhandari suggested, you're a missing a few things in your code. At some point you might want to use routing and a controller.

Having said that, you can simply render a page with TABs using this code:

<body ng-app="starter">

    <ion-header-bar class="bar-positive">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>

    <ion-tabs class="tabs-positive tabs-icon-only">

        <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
            <ion-nav-view>
                <ion-content>
                    Content of One
                </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
            <ion-nav-view>
                <ion-content>
                    Content of Two
                </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
            <ion-nav-view>
                <ion-content>
                    Content of Three
                </ion-content>
            </ion-nav-view>
        </ion-tab>
    </ion-tabs>

</body>

With this you don't even need to define a controller or manage states and everything would work just fine.

This is the codepen.

Here, you're not using the standard navigation system as you're not using states and you don't have a default <ion-nav-view> where all the subviews would be injected; see ref. here.

If you want to add a button to your header you can only add it inside the <ion-header-bar>:

<ion-header-bar class="bar-positive">
    <h1 class="title">Ionic Blank Starter</h1>
    <div class="buttons">
        <button class="button">Done</button>
      </div>
</ion-header-bar>

Of course working with something like this wouldn't be feasible, considering you're building a working application and you need controllers, navigation and history.

The way to go is to define a <ion-nav-view> in your body:

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>  

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

Defining states during the configuration of your application:

$stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      controller: 'homeController',
    });

and adding an html page with your view and tabs:

<ion-view view-title="home">

    <ion-tabs class="tabs-positive tabs-icon-only tabs-striped tabs-top">

        <ion-tab title="Tab1" icon-on="ion-ios-home" icon-off="ion-ios-home-outline">
            <ion-nav-view name="tab-1">
              <ion-content padding="true" has-header="true">
                  <h1>HOME</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="Tab2" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
            <ion-nav-view name="tab-2">
              <ion-content padding="true" has-header="true">
                  <h1>SETTINGS</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="Tab3" icon-on="ion-ios-information" icon-off="ion-ios-information-outline">
            <ion-nav-view name="tab-3">
              <ion-content padding="true" has-header="true">
                  <h1>INFO</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

    </ion-tabs>

</ion-view>

If you want to see how it works this plunker should do.

Upvotes: 2

Bipin Bhandari
Bipin Bhandari

Reputation: 2692

In the codepen, there is no script for routing and tabs won't work without it. Docs of ion-tabs could be misleading because it only shows the html part.

You basically have two ways to get a functioning ion tabs. One is create fresh new ionic project with tabs:

ionic start myApp tabs

In this project you could see well implemented tabs and customise it to your need.

Or you could browse its source code to see how its implemented. Source code is here:

https://github.com/driftyco/ionic-starter-tabs

Good luck!

Upvotes: 1

Related Questions