標題，導航欄和左側菜單一起 - 離子

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