Question

我想制作一个带有三种不同主要布局的离子应用程序。

没有标题只是一个bg图像和一个输入字段
包含一个按钮和一个列表的标题
使用两个按钮而不是四个标签

我如何构建布局？我的第一个想法是：

的index.html

<body ng-app="starter">
    <ion-nav-view></ion-nav-view>
</body>

而不是布局2（overview.html）：

<ion-nav-bar class="bar-balanced">
  <ion-nav-buttons side="primary">
    ...
  </ion-nav-buttons>
</ion-nav-bar>
<ion-view view-title="Title Page 2" class="has-header">
  <ion-content>
    ...
  </ion-content>
</ion-view>

对于布局3：抽象布局（tabs.html）：

<ion-nav-bar class="bar-balanced has-tabs-top">
  <ion-nav-back-button>
  </ion-nav-back-button>
  <ion-nav-buttons side="primary">
      ...
    </ion-nav-buttons>
</ion-nav-bar>

<ion-tabs class="tabs-striped tabs-top tabs-background-balanced">

<ion-tab title="Dash" icon-off="ion-android-chat" icon-on="ion-android-chat" href="#/tab/dash">
  <ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
...
</ion-tabs>

特定的标签布局（tab-dash.html）：

<ion-view view-title="Dashboard">
  <ion-content>
    ...
  </ion-content>
</ion-view>

我的app.js：

$stateProvider
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('overview', {
      url: '/',
      templateUrl: 'templates/overview.html',
      controller: 'OverviewCtrl'
    })

这不正确...布局2中的标题没有显示，标签没有与标题正确“融合”。洞的结构是错误的还是布局文件？

Answer 1

您可以将导航栏放在“root”index.html中，并使用以下属性控制其可见性，这可能会阻止您在不同文件中声明多个导航栏。

<ion-view view-title="My View Title" hide-nav-bar="true">

in ionics启动了标签应用程序的模板，建议的方法似乎是将导航栏放在

之外

来源：https://github.com/driftyco/ionic-starter-tabs/blob/master/index.html

包含标签的入门模板的Plnkr：http://plnkr.co/edit/qYMCrt?p=preview

离子应用程序三种不同的布局

1 个答案: