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：

.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

您可以使用flex css属性执行此操作，您需要添加一些类。

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

离子侧菜单，如何将链接放在侧边菜单的底部

1 个答案: