如何使用sidemenu和選項卡創建Ionic應用程序？

我用Ionic創建了一個應用程序，首先我創建了標籤並且工作正常，但現在我想創建side-menu標籤，但我不知道如何才能做到這一點。如何使用sidemenu和選項卡創建Ionic應用程序？

我該怎麼做？

的Index.html

<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7"> 

      <!-- The nav bar that will be updated as we navigate --> 
       <ion-nav-bar class="bar bar-header bar-assertive" align-title="center"> 
       </ion-nav-bar> 

       <!-- where the initial view template will be rendered --> 
       <ion-nav-view> 
       <ion-view>    
        <ion-content></ion-content> 
       </ion-view> 
       </ion-nav-view> 

    </body>

Tabs.html

<ion-view view-title="MeuPedido" align-title="center"> 

    <ion-tabs class="tabs-icon-top tabs-top tabs-assertive"> 
     <ion-tab icon="icon ion-fork" title="Compras"> 
     <ion-nav-view name="tab-empresas"></ion-nav-view> 
     <ion-nav-view name="tab-produtos"></ion-nav-view> 
     <ion-nav-view name="tab-qtdProduto"></ion-nav-view> 
     </ion-tab>    

     <ion-tab icon="ion-ios-cart"    title="Carrinho"></ion-tab> 
     <ion-tab icon="ion-android-person"   title="Perfil"></ion-tab> 
     <ion-tab icon="ion-information-circled"  title="Sobre"></ion-tab> 
    </ion-tabs> 

</ion-view>

app.js

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    // setup an abstract state for the tabs directive 
    .state('main', {  
     url: "/main", 
     templateUrl: 'templates/main.html', 
     controller: 'MainCtrl' 
    }) 

    .state('login', { 
    url: '/login', 
    templateUrl: 'templates/login.html', 
    controller: 'UserCtrl'  
    }) 

    .state('addUsuario', { 
    url: '/addUsuario', 
    templateUrl: 'templates/addUsuario.html', 
    controller: 'UserCtrl'  
    }) 

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

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

    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/main'); 
})

來源

2016-11-21 FernandoPaiva

如果你感興趣編輯在同一個項目中創建標籤和sidemenu，你可以使用this github存儲庫瞭解。

來源

2016-11-21 07:00:52 Dev

完成！這很簡單。

我做到了。

的index.html

<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7"> 

      <!-- The nav bar that will be updated as we navigate --> 
       <ion-nav-bar class="bar bar-header bar-assertive" align-title="center"> 
       </ion-nav-bar> 

       <!-- where the initial view template will be rendered --> 
       <ion-nav-view></ion-nav-view> 

    </body>

sidemenu.html

<ion-side-menus> 
    <!-- Center content --> 
    <ion-side-menu-content> 
    <ion-nav-bar class="bar bar-header bar-assertive" > 
     <ion-nav-back-button> 
     </ion-nav-back-button> 

     <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
     </button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 

    <!-- Left menu --> 
    <ion-side-menu side="left" class="customSideMenu"> 
    <ion-header-bar class="bar-stable"> 
     <h1 class="title">Header</h1> 
    </ion-header-bar> 
    <ion-content> 
     <ion-list>   
     <ion-item menu-close href="#/app/search"> 
      Search 
     </ion-item> 
     <ion-item menu-close href="#/app/browse"> 
      Browse 
     </ion-item> 
     <ion-item menu-close href="#/app/playlists"> 
      Playlists 
     </ion-item> 
     </ion-list> 
    </ion-content> 

    <ion-footer-bar class="bar bar-footer"> 
     <h6>Desenvolvido por Iguana Sistemas</h6> 
    </ion-footer-bar> 

    </ion-side-menu> 


</ion-side-menus>

tabs.html

<ion-view view-title="MeuPedido" align-title="center"> 



    <div class="tabs tabs-top tabs-light"> 
     <a nav-clear class="tab-item disable-user-behavior active" title="Home" nav-clear ui-sref="snd.home"> 
      <i class="icon ion-home"></i><span class="tab-title ng-binding" ng-bind-html="title"></span> 
     </a> 
     <a nav-clear class="tab-item disable-user-behavior" title="Chat" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ui-sref="snd.chat"> 
      <i class="icon ion-chatbubbles"></i><span class="tab-title ng-binding" ng-bind-html="title"></span> 
     </a> 
     <a nav-clear class="tab-item disable-user-behavior" title="Drink" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ui-sref="snd.drink"> 
      <i class="icon ion-wineglass"></i><span class="tab-title ng-binding" ng-bind-html="title"></span> 
     </a> 
    </div> 


</ion-view>

app.js

.state('app',{ 
    url: '/app', 
    abstract:true,  
    templateUrl: 'templates/sidemenu.html',   
    }) 

    .state('app.tabs',{ 
    url: '/tabs', 
     views: { 
     'menuContent': { 
      templateUrl: 'templates/tabs.html',     
     } 
     } 
    })

來源

2016-11-21 22:40:36 FernandoPaiva

如何使用sidemenu和選項卡創建Ionic應用程序？

回答

相關問題