android - How to implement tabs on top along with side menu -

i using ionic framework. need sliding tabs , side menu

any idea ? how achieve uisng ionic framework?

i tried ionic tabs . showing in footer there no menu icon

thanks

if want implement ionic side menus tabs have work little bit configuration routing system.

first of need have abstract state menu:

.state('app', {     url: "/app",     abstract: true,     templateurl: "menu.html", }) 

then need add states main tab (container) , each single tab:

.state('app.tabs', {     url: "/tabs",     views: {         'menucontent': {             templateurl: "tabs.html",         }     } })  .state('app.tabs.articles', {     url: "/articles",     views: {         'articles-tab': {         templateurl: "articles.html",         controller: 'articlesctrl'         }     } })  .state('app.tabs.colonies', {     url: "/colonies",     views: {         'colonies-tab': {         templateurl: "colonies.html",         controller: 'coloniesctrl'         }     } }); 

as can see each state inherits the main state: app.

the menu (menu.html):

<ion-side-menus enable-menu-with-back-views="false">   <ion-side-menu-content>     <ion-nav-bar class="bar-stable">       <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>    <ion-side-menu side="left">     <ion-header-bar class="bar-stable">       <h1 class="title">menu</h1>     </ion-header-bar>     <ion-content>       <ion-list>          <ion-item nav-clear menu-close href="#/app/tabs">             articles & colonies          </ion-item>         <ion-item nav-clear menu-close href="#/app/foo">             foo         </ion-item>               </ion-list>     </ion-content>   </ion-side-menu> </ion-side-menus> 

is standard side menu can copy documentation.
need template tabs (tabs.html):

<ion-view view-title="articles & colonies">     <ion-tabs class="tabs-striped tabs-top tabs-color-assertive">        <ion-tab title="articles" ui-sref="app.tabs.articles" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline">             <ion-nav-view name="articles-tab"></ion-nav-view>       </ion-tab>        <ion-tab title="colonies" ui-sref="app.tabs.colonies" icon-on="ion-ios-color-filter" icon-off="ion-ios-color-filter-outline">             <ion-nav-view name="colonies-tab"></ion-nav-view>       </ion-tab>      </ion-tabs> </ion-view> 

this main container tabs want add view. referenced state app.tabs.
can see each <ion-tab> contains <ion-nav-view>.

the attribute ui-sref loads state single tab.
<ion-nav-view> has name set:

<ion-nav-view name="articles-tab"></ion-nav-view> 

this name must match 1 defined in configured state:

.state('app.tabs.articles', {     url: "/articles",     views: {         'articles-tab': {         templateurl: "articles.html",         controller: 'articlesctrl'         }     } }) 

last thing add view (template) articles , colonies (articles.html):

<ion-view view-title="articles">   <ion-content>     <div class="card">       <div class="item item-text-wrap">         article 1       </div>       <div class="item item-text-wrap">         article 2       </div>       <div class="item item-text-wrap">         article 3       </div>           </div>   </ion-content> </ion-view> 

notes:

for ios, tabs appear @ bottom of screen. android, tabs @ top of screen, below nav-bar. follows each os's design specification, can configured $ionicconfigprovider.

reference here.

since want tabs on top i've used css class tabs-top. same thing can achieved using $ionicconfigprovider tabs.position(value).

reference here.

the easiest thing play plunker bit , see how works.