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项目引用了离子束和版本的0.9.27版本。 css，例如

<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, v1.2.4-nightly-1917 //both js & css

现在标签页显示为（注意文字＆＃34;标签1内容＆＃34;正在被离子导航栏重叠）

我还应该注意，我已将class="has-header"应用于侧边菜单和标签页。侧边菜单显示正确，但标签不是。

我是否需要在更新的离子束和css的上下文中显示选项卡，以便它显示如下？

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

Answer 1

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

<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

如何在离子导航条的上下文中正确显示这些离子标签？

1 个答案: