CODEWITHSUNDEEP
angularjsionic-framework
Hitu Bansal
Hitu Bansal

Reputation: 3137

Tabs in ionic is not showing content

I am trying to show content. I added custom code here manually on custom template file.

  <ion-content>


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

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

  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
     My Content here 1
  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
    My Content here 3
  </ion-tab>

</ion-tabs>
  </ion-content>
</ion-view>

I took example code from here

http://ionicframework.com/docs/api/directive/ionTabs/

I am able to see tabs, but not content. And yes if i follow sample app tab for ionic i am able to do this. But i need above one.

Can we show content here.

Upvotes: 11

Views: 11247

Answers (2)

mtpultz
mtpultz

Reputation: 18328

You have to use a view to load content within the tabs directive. The route state uses the name of the view to place the content that will reside within the tab.

// Notice the referenced view is "home-tab"
.state('tabs.home', {
  url: "/home",
  views: {
    'home-tab': {
      templateUrl: "templates/home.html",
      controller: 'HomeTabCtrl'
    }
  }
})

// Which correlates to the name of the view, which is also "home-tab"
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
  <ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>

You can add it easily within the same file (like in the example) using a template, which correlates using the templateUrl of the route to the id of the template in the markup:

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Home">
    <ion-content class="padding">
      <p>
        // Your content
      </p>
    </ion-content>
  </ion-view>
</script>

For a bit more information on setting up tabs in ionic there's also this post.

Upvotes: 8

JuniorDev
JuniorDev

Reputation: 1200

If you study the example closely you'll see that, each tab entry contains a ion-nav-view and each nav-view is actually a ion-view with ion-content that specify its contents.

In your code, tab elements are wrapped inside a ion-content which is actually the opposite way.

Here is a slightly simplified example http://codepen.io/anon/pen/XbOLzY

Upvotes: 3

Related Questions