首页 文章

离子头与离子含量重叠离子3

提问于
浏览 次
5

到目前为止，我有一个非常简单的应用程序，但我无法弄清楚如何修复内容的重叠（内容顶部的 Headers ） . 我创建了一个组件 header ，其中包含名称建议的 Headers .

header.html

<ion-header>
    <ion-navbar color="dark">
        <ion-title>
            Some Title
        </ion-title>
    </ion-navbar>
</ion-header>

我一直试图在不同的页面上使用它，但它总是重叠页面的内容 .

page.html

<app-header></app-header>

<ion-content padding>
    <h1>Some Page</h1>
</ion-content>

我尝试使用 div 标签而不是 ion-content ，并尝试使用 class="has-header" ，但似乎没有任何工作 . 虽然，如果不使用 header 作为如下组件，它可以正常工作 . 但我想将 header 用作组件，以便我可以在其他页面上重用它 .

page.html (don't want to have it like this)

<ion-header>
    <ion-navbar color="dark">
        <ion-title>
            Some Title
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <h1>Some Page</h1>
</ion-content>
ionic-framework ionic3

2 回答

  • 1

    尝试以下：

    <app-header></app-header>
<ion-content style="margin-top:__px">
<h1>Some Page</h1>
</ion-content>
    回复于
  • -1

    正如Ionic团队的@brandyshea的Ionic官方论坛this thread所指出的那样，在一个页面中你只能有3种标签作为顶级标签，其他一切必须进入其中一个标签 . 3个标签是：

    <ion-header></ion-header>
<ion-content></ion-content>
<ion-footer></ion-footer>

    我试图将我的应用程序组织为@Hafiz并偶然发现同样的问题，解决方案是将我的自定义 Headers （ <ew-navigazione-top> ）放在每页的 <ion-header> 中 .

    <ion-header>
<ew-navigazione-top [ew_title]="navParams.get('label')" [ew_subtitle]="The subtitle"></ew-navigazione-top>
</ion-header>

    附：这是Ionic 3的解决方案 . 在相同的链接线程上，您可以找到其他特定的解决方案 .

    回复于

相关问题