首页 > 解决方案 > 当离子内容包含元素时,离子页脚不显示

问题描述

ion-footerion-content有元素时没有显示

在此代码中,页脚没有出现:

<ion-content>
  <div class="text-center">
    <p class="text-gray-800 text-3xl font-bold m-0">{{user.name}}</p>
    <p class="text-gray-400 mt-2">{{user['custom:role']}}</p>
  </div>
  <ion-button expand="block" color="primary">logout</ion-button>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

这有效:

<ion-content>
  <ion-button expand="block" color="primary" (click)="cognito.logout()">logout</ion-button>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

我尝试使用或删除按钮来删除divp标记ion-text并仅保留p/ion-text

但是我不能让页脚ion-button在我的ion-content.

我目前使用一些 css,没有 ion-footer。我宁愿找到一个非hacky的解决方案。

标签: javascriptangularcapacitorionic5angular12

解决方案


推荐阅读