Anchor Element auf der Unterseite der Ionic-Menü

Question

Ich habe die unten HTML, um ein Side-Menü in Ionic zu bauen. Ich ziele darauf ab, das letzte Element im Menü zu verankern, "Login" an den unteren Rand des Menüs, weg von den anderen Elementen. Gibt es einen einfachen Weg, dies in Ionic zu tun?

Answer 1

Wurden die gleiche Sache in einem Projekt tun, das ich baue und eine Lösung fand, die Ihnen helfen könnte. Sie können die Stile einfach an Ihre Bedürfnisse anpassen.

<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

@ Louwki Antwort für Ionic korrekt ist 1, und nur ein wenig anders in Ionic 2.

Aktualisiert für Ionic 2 (Ion-footer-Bar wurde Ionen Footer).

<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

Ich habe es so gemacht. Sie müssen kein CSS hinzufügen.

<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>