如何让这些 ion-tabs 在 ion-nav-bar 的上下文中正确显示？

Question

我正在尝试获得一个选项卡式布局，如下所述以正确显示：

Copied from: http://codepen.io/imee12/pen/YPOGJe

<ion-view title="{{navTitle}}" left-buttons="leftButtons" >
    <ion-tabs tabs-type="tabs-icon-only">
        <ion-tab title="Tab 1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
            <ion-content has-header="true" padding="true" class="has-header">
                <h2>Tab 1 Content</h2>
            </ion-content>
        </ion-tab>
        <ion-tab title="Tab 2" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
            <ion-content has-header="true" padding="true" class="has-header">
                <h2>Tab 2 Content</h2>
            </ion-content>
        </ion-tab>
        <ion-tab title="Tab 3" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
            <ion-content has-header="true" padding="true" class="has-header">
                <h2>Tab 3 Content</h2>
            </ion-content>
        </ion-tab>
    </ion-tabs>
</ion-view>

标签存在于以下容器中，该容器具有ion-nav-bar。

<ion-side-menus>

    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
            <ion-nav-back-button>
            </ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>

        <ion-nav-view name="main"></ion-nav-view>
    </ion-pane>
    <ion-side-menu side="left">
        <header class="bar bar-header bar-assertive">
            <div class="title">Side Menu</div>
        </header>
        <ion-content class="has-header" has-header="true">
            <ul class="list">
                <a ui-sref="entry" class="item">Back To Entry Page</a>
                <a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a>
                <a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
            </ul>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

Codepen 项目引用 ionic bundle 和 css 的 0.9.27 版，例如

<link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>

我最近将我的本地环境更新为 ionic nightly build，所以我目前正在使用

 * Ionic, v1.2.4-nightly-1917 //both js & css

现在标签页显示为（注意文本“Tab 1 Content”被 ion-nav-bar 重叠）

我还应注意我已将class="has-header" 应用于侧边菜单和选项卡。侧边菜单显示正确，但选项卡不显示。

我需要以不同的方式在更新的离子束和 css 的上下文中显示选项卡，使其如下所示吗？

我做错了什么？我需要做什么来解决这个问题？

Answer 1

事实证明，解决方案是将标签放在带有class="has-header" 的ion-content 容器中。

<ion-view title="{{navTitle}}" left-buttons="leftButtons">
    <!-- the ion-content container -->
    <ion-content class="has-header" padding="true">
        <ion-tabs tabs-type="tabs-icon-only">
            <ion-tab title="Tab 1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                <ion-content padding="true">
                    <h2 class="has-header">Tab 1 Content</h2>
                </ion-content>
            </ion-tab>
            <ion-tab title="Tab 2" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                <ion-content padding="true">
                    <h2 class="has-header">Tab 2 Content</h2>
                </ion-content>
            </ion-tab>
            <ion-tab title="Tab 3" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                <ion-content padding="true">
                    <h2 class="has-header">Tab 3 Content</h2>
                </ion-content>
            </ion-tab>
        </ion-tabs>
    </ion-content>
</ion-view>

另外，为了让讨厌的标签贴在底部，我将$ionicConfigProvider 带入了角度配置，并用定位棒给了它一巴掌。

angular.module('ionicApp', ['ionic', 'services'])
    .config(['$stateProvider', '$urlRouterProvider', '$ionicConfigProvider', 
        function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 

            $ionicConfigProvider.tabs.position('bottom'); // other values: top