이오니아 사이드 메뉴, 사이드 메뉴 맨 아래에 링크를 배치하는 방법

Question

이온 앱에 사이드 메뉴가 있습니다. 링크가 있어야하고 로그 아웃 링크가 하단에 있어야합니다. 이온 -리스트 높이는 링크의 양에 의존하고, 링크 자체의 위치와 함께 플레이하여 사이드 메뉴의 하단에 놓을 수 없기 때문에, 이것을 달성하는 방법을 잘 모르는 경우.

이 이제 상황 :

는 그리고 이것은 HTML입니다 : 그래서,

<ion-side-menu side="left" class="side-menu" scroll="false"> 
     <ion-content> 
     <ion-list> 
      <ion-item ui-sref=""> 
      Min Profil 
      </ion-item> 
      <ion-item ui-sref="main.logout" class="logout"> 
      Logg out 
      </ion-item> 
     </ion-list> 
     </ion-content> 
    </ion-side-menu> 

업데이트

내가 이온 기본 태그 및 클래스를 덮어했다 이것이 결국 나를 위해 일한 것입니다.

HTML :

<ion-side-menu side="left" class="side-menu" scroll="false"> 
     <ul class="menu"> 
     <div class="side-menu-header"> 
     </div> 
     <div class="menu-main"> 
      <li> 
      <a ui-sref="">Min Profil</a> 
      </li> 
     </div> 
     <div class="menu-last"> 
      <li> 
      <a ui-sref="main.logout">Logg out</a> 
      </li> 
     </div> 
     </ul> 
    </ion-side-menu> 

CSS :이 플렉스 CSS 속성을 사용하여, 당신은 몇 가지 클래스를 추가해야합니다 할 수

.menu { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 

    ,a { 
    background-color: $dark-background-color; 
    color:$light; 
    text-decoration: none; 
    font-size: 1rem; 
    } 

    .side-menu-header { 
     height: 60px; 
    } 

    .menu-main { 
     position: absolute; 
     top: 60px; 
     margin: 15px; 

     li { 
     margin: 5px 0 5px 0; 
     } 
    } 

    .menu-last { 
     margin: 15px; 
    } 
} 

Answer 1

. 여기

<ion-list class="menu"> 
    <div class="menu-main"> 
     <ion-item ui-sref=""> 
      Min Profil 
     </ion-item> 
     <!-- Place other items here --> 
    </div> 
    <div class="menu-last"> 
     <ion-item ui-sref="main.logout" class="logout"> 
      Logg out 
     </ion-item> 
    </div> 
</ion-list> 

는 CSS입니다 :

.menu { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}