How to render content in Ionic tabs without new templates, but by just switching tabs like in bootstrap

Question

We are building a template with three tabs in it. Those tabs are supposed to work like in this example: https://getbootstrap.com/javascript/#tabs-examples

We only want to switch content in the tabs. How can we do that without the need for new templates?

Our detail template is like this:

<ion-view view-title="{{item.summary.name}}">
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
  </ion-nav-buttons>


  <div class="bar bar-subheader bar-assertive">
    <ion-tabs class="tabs-background-assertive tabs-color-light">
      <ion-tab title="Summary">
        <ion-nav-view name="summary" ></ion-nav-view>
      </ion-tab>

      <ion-tab title="Ingridents">
        <ion-nav-view name="ingdts"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Videos">
        <ion-nav-view name="video"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </div>

</ion-view>

We tried this, https://stackoverflow.com/a/31506520/170445 but its not working.

Answer 1

If I understand correctly, you can wrap the ion-content of the tab in a ion-pane to use static tabs:

<ion-tab title="Summary">
  <ion-pane>
    <ion-content>
      <!-- Tab content here -->
      Summary content
    </ion-content>
  </ion-pane> 
</ion-tab>

Here is a codepen example