Pozycja kotwicy na dole menu jońskiego

Question

Mam poniżej HTML, aby zbudować menu boczne w Jońskim. Zamierzam zakotwiczyć ostatni element w menu, "zaloguj się" na dole menu, z dala od innych przedmiotów. Czy jest prosty sposób na zrobienie tego w Ionic?

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content> 
    <ion-nav-bar class="bar-positive"> 
     <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-positive"> 
    </ion-header-bar> 
    <ion-content> 
     <ion-list> 
     <ion-item nav-clear menu-close href="#/app/people"> 
      <i class="icon ion-ios7-people"></i> 
      People 
     </ion-item> 
     <ion-item nav-clear menu-close href="#/app/places"> 
      <i class="icon ion-ios7-location"></i> 
      Places 
     </ion-item> 
     <ion-item nav-clear menu-close href="#/app/perks"> 
      <i class="icon ion-ios7-star"></i> 
      Perks 
     </ion-item> 
     <ion-item nav-clear menu-close ng-click="login()"> 
      Login 
     </ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

Answer 1

Czy robimy to samo w projekcie, który buduję i znalazłem rozwiązanie, które może ci pomóc. Możesz po prostu dostosować style do swoich potrzeb.

<ion-side-menu side="right"> 
    <ion-content> 

     <ion-list> 
      <ion-item nav-clear menu-close href="#">Item1</ion-item> 
      <ion-item nav-clear menu-close href="#">Item2</ion-item> 
      <ion-item nav-clear menu-close href="#">Item3</ion-item> 
      <ion-item nav-clear menu-close href="#">Item4</ion-item> 
     </ion-list> 

    </ion-content> 

    <ion-footer-bar class="bar-stable"> 
     <ion-item nav-clear menu-close href="#" style="left:0;right:0;margin:0; width: 100%;position: fixed;">Logout</ion-item> 
    </ion-footer-bar> 

</ion-side-menu> 

Answer 2

@ odpowiedź Louwki jest poprawna dla Ionic 1, i tylko trochę inaczej w jońskich 2.

Aktualizacja dla Ionic 2 (jon-footer-bar stał jonów stopka).

<ion-side-menu side="right"> 
<ion-content> 

    <ion-list> 
     <ion-item nav-clear menu-close href="#">Item1</ion-item> 
     <ion-item nav-clear menu-close href="#">Item2</ion-item> 
     <ion-item nav-clear menu-close href="#">Item3</ion-item> 
     <ion-item nav-clear menu-close href="#">Item4</ion-item> 
    </ion-list> 

</ion-content> 

<ion-footer class="bar-stable"> 
    <ion-item nav-clear menu-close href="#" style="left:0;right:0;margin:0; width: 100%;position: fixed;bottom:0;">Logout</ion-item> 
</ion-footer> 

</ion-side-menu> 

Answer 3

Zrobiłem to w ten sposób. Nie musisz dodawać niektórych CSS.

<ion-side-menu side="left"> 
    <header class="bar bar-header bar-stable"> 
     <h1 class="title">Title</h1> 
    </header> 
    <ion-content class="has-header has-footer"> 
     <ion-list> 
      <ion-item nav-clear menu-close ui-sref="home">Home</ion-item> 
     </ion-list> 
    </ion-content> 

    <ion-footer-bar class="bar-stable" ng-click="logout()"> 
     <div class="title"><i class="icon ion-power"></i> Logout</div> 
    </ion-footer-bar> 
</ion-side-menu>