使用帶有離子頭離子側面菜單

<ion-view> 
    <div ng-if="showHeader"> 
    <ion-header-bar class="bar bar-header navbar-fixed-top"> 
     <div class="row"> 
     <div> 
     <span class="navbar-brand" href="#"> 
      //data 
     </span> 
     </div> 

     <div class="button button-icon" ng-click=""> 
      //button 
     </div> 
     </div> 
    </ion-header-bar> 
    </div> 
    <div id="customSubHeader"> 
    //content 
    </div> 
    <ion-nav-view name="PageView"></ion-nav-view> 
</ion-view>

我試着用使用帶有離子頭離子側面菜單

<div ng-if="showHeader"> 
    <ion-side-menus> 
    <ion-side-menu-content> 
<ion-header-bar class="bar bar-header navbar-fixed-top"> 
<div class="row"> 
      <div> 
      //data 
       </div> 

    <div class="button button-icon topPull" ng-click="toggleTopMenu()"> 
     //button 
</div> 
</div> 
</ion-header-bar> 
</ion-side-menu-content> 
      <ion-side-menu side="left"> 
       <h2 style="margin-top:80px;">Side Menu</h2 > 
      </ion-side-menu> 
     </ion-side-menus> 



</div>

，但沒有幫助取代它。

如何在<ion-header-bar></ion-header-bar>中集成Ionic側面菜單？我不認爲我現在可以用導航欄替換標題欄，並且ion-side-menu中的標題欄不顯示任何內容。

來源

2015-11-02 Simran Kaur

你必須創建你的菜單狀態是這樣的

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

您menu.html文件將有頭這樣的事情

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content> 
     <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 
<ion-side-menu side="left"> 
    <ion-content class="list-black"> 
     <ion-list> 
      <ion-item class="background-black" menu-close href="#/menu/home"> 
       Home 
      </ion-item> 
     ........ 
     ....... 
     </ion-list> 
    </ion-content> 
</ion-side-menu>

，然後模板頁會是這樣的

<ion-header-bar class="header-black"> 
    <button class="button button-icon button-clear" menu-toggle="left"><i class="icon-icon-hamburger icon-white"></i></button> 
    <h1 class="title light header-title">App header for home page</h1> 
    <div class="buttons" side="left"> 
     <button class="button button-clear button-light" ng-click="toggleLayout()">     
      <i ng-show="layoutOptions.value == 'grid'" class="icon-icon-list icon-white icon-36"></i> 
      <i ng-show="layoutOptions.value == 'list'" class="ion-android-apps icon-white icon-30"></i>     
     </button>    
     <button class="button button-clear button-light"><i class="icon-icon-notification icon-white icon-30"></i></button> <span class="badge badge-assertive">13</span> 
    </div> 
</ion-header-bar>  
<ion-content ng-show="layoutOptions.value == 'grid'"> 
..... 
....

來源

2015-11-02 09:32:02 Iftikhar

使用帶有離子頭離子側面菜單

回答

相關問題