Якорный элемент внизу Ионного меню

У меня есть нижний html для создания бокового меню в 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>

источник

2015-02-14 MattDionis

Выполняли то же самое в проекте, который я создаю, и нашли решение, которое может вам помочь. Вы можете просто настроить стили в соответствии с вашими потребностями.

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

enter image description here

источник

2015-03-24 06:38:08 Louwki

Интересный подход. Работает ли это на развернутых приложениях для iOS и Android? –

Да, опубликованы для android и ios и отлично работает – Louwki

любая идея, как заставить это работать с несколькими элементами? – Schaemelhout

@ ответ Louwki является правильным для ионических 1, и лишь немного отличается в ионическом 2.

Обновления для Ионных 2 (ион-сноска-бар стал ионной сноской).

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

источник

2017-04-30 20:44:18 Devotoare

Я сделал это так. Вам не нужно добавлять 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>

источник

2017-12-05 16:01:44 Julian

Якорный элемент внизу Ионного меню

ответ

Смежные вопросы