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

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