Ion-tabs stops list showing

1

I’m just starting out with the ionic framework and with the example for playlists I just can’ seem to get the tabs showing when using a list. Ive tried putting ion-tabs inside and outside of view… is it me or anyone else experienced the issue. The tabs show but the list doesn’t , removing tabs shows the list.

<ion-view title="Playlists">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>

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

  <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- Tab 1 content -->
    <h1>Home</h1>
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- Tab 2 content -->
    <h1>About</h1>
  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- Tab 3 content -->
    <h1>Settings</h1>
  </ion-tab>

</ion-tabs>

</ion-view>

Cheers

2

After looking at it was just my understanding…

Needed to add the content into the tab view content doh!

should be something like

<ion-view title="Playlists">
   <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
    <ion-content class="has-header">


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

  <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- Tab 1 content -->
    <h1>Home</h1>
        <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- Tab 2 content -->
    <h1>About</h1>
   

  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- Tab 3 content -->
    <h1>Settings</h1>
  </ion-tab>

</ion-tabs>

</ion-view>
3

Your ion-list needs to go inside one of the tabs.

Something like this :

<ion-view title="Playlists">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>

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

    <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" class="has-header">
      <!-- Tab 1 content -->
      <ion-list>
        <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
        </ion-item>
      </ion-list>
    </ion-tab>

    <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
      <!-- Tab 2 content -->
      <h1>About</h1>
    </ion-tab>

    <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
      <!-- Tab 3 content -->
      <h1>Settings</h1>
    </ion-tab>

  </ion-tabs>

</ion-view>