Question

我正在开发一个应用程序，其中每个页面都有标题。在标题的左下角，应该有左侧菜单。这个应用程序包含大约20-30页，并将其从jqm移动到离子。

我有多个示例，但标题和导航栏位于相同位置。请帮我解决这个问题。

提前致谢。

Answer 1

您可以在同一视图中同时使用导航栏和标题栏。您可以使用ion-nav-bar指令（http://ionicframework.com/docs/api/directive/ionNavBar/）在顶部添加固定导航栏，并可以使用ion-header-bar与类bar-subheader创建子标题。 http://ionicframework.com/docs/api/directive/ionHeaderBar/

显示两者的示例代码如下：

 <ion-nav-bar class="bar-positive">
  <ion-nav-buttons side="left">
    <button class="button button-icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
    <button class="button button-icon ion-search"></button>
    <button class="button button-icon ion-ios-email"></button>
    <button class="button button-icon ion-ios-person"></button>
  </ion-nav-buttons>
     <h1 class="title"> Main Nav bar</h1>
  </ion-nav-bar>
 <ion-header-bar class="bar-balanced bar-subheader">
    <button class="button button-icon icon ion-chevron-left"></button>
   <h2 class="title">Sub Header</h2>
 </ion-header-bar>
<ion-content has-subheader="true">
  <h1> Sub header example</h1>
 </ion-content>

此代码笔链接中提供了工作示例： http://codepen.io/svswaminathan/pen/MYBrgM

标题，导航栏和左菜单在一起 - 离子

1 个答案: