首页 文章

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

提问于
浏览 次
0

我正在尝试使用标签布局，如下所示，以便正确显示：

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项目引用了离子束＆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, v1.2.4-nightly-1917 //both js & css

现在标签页显示为（注意文本“选项卡1内容”与离子导航栏重叠）

enter image description here

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

enter image description here

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

enter image description here

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

angularjs ionic-framework

1 回答

  • 0

    事实证明，解决方案是将标签放在一个带有 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
    回复于

相关问题