我们正在构建一个带有三个选项卡的模板。这些选项卡应该像以下示例一样工作:https://getbootstrap.com/javascript/#tabs-examples
我们只想切换选项卡中的内容。我们如何做到这一点而无需新模板?
我们的详细信息模板如下所示:
<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>
我们尝试了这个,https://stackoverflow.com/a/31506520/170445,但是不起作用。
最佳答案
如果我理解正确,则可以将选项卡的ion-content
包装在ion-pane
中以使用静态选项卡:
<ion-tab title="Summary">
<ion-pane>
<ion-content>
<!-- Tab content here -->
Summary content
</ion-content>
</ion-pane>
</ion-tab>
这是一个codepen example