我的 ion-content 与 Ionic 4 中的 header 重叠

Question

我正在使用我的 Ionic 4 应用程序，我已经安装了 Ionic 4 选项卡主题，并且通过在 中添加 header 代码使 header 通用=39=] 但问题是我的与 header.

重叠

这是我的app.component.html:

<ion-header>
    <ion-toolbar>
    <ion-icon name="more" slot="end"></ion-icon>
    </ion-toolbar>
</ion-header>
<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>

这是我的tab1.page.html:

<ion-content>
    <ion-card class="welcome-card">
        <ion-img src="/assets/shapes.svg"></ion-img>
        <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
        </ion-card-header>
        <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
        </ion-card-content>
    </ion-card>
</ion-content>

我刚刚在 Ionic 4 中安装了新的选项卡主题，我只做了这些更改。

非常感谢任何帮助。

这是我的StackBlitz

Answer 1

为避免 ion-content 重叠，您应该向 ion-content

添加样式

<ion-content class="content"></ion-content>

.content{
 margin-top: 50px;
}

你可以试试上面的方法，要不试试吧..

<ion-content padding>

</ion-content>

向 ion-content 标签添加填充

您可以在此处查看适合您的任何其他解决方案ion-content overlaps with header

Answer 2

对于那些不想处理近似 css 样式的人，@AJT82 指出了处理此问题的正确方法。通过创建自定义 header 组件，您将不必使用任何边距或填充样式。此外，您还可以选择在特定页面上显示自定义标题。

假设我的工具栏需要在我的组件 HomePageModule 上，我创建了一个子组件 toolbar.ts。然后我将其导入 home.module.ts 并将其声明为 home.page.html.

toolbar.ts
使用 Input 从 html:

检索 title 参数

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-toolbar',
  templateUrl: 'toolbar.html',
  styleUrls: ['toolbar.scss']
})
export class AppToolbar {
  @Input() public title: string;

  constructor() {}
}

toolbar.html
显示从模块接收的 title：

<ion-header>
  <ion-toolbar>
    <ion-title>{{title}}</ion-title>
  </ion-toolbar>
</ion-header>

home.module.ts
导入 toolbar 的模块：

import { AppToolbar } from './toolbar/toolbar';

@NgModule({
  declarations: [AppToolbar]
})
export class HomePageModule {}

home.page.html
然后，使用 title 参数在 home 模板中声明它：

<app-toolbar [title]="'My Custom Title'"></app-toolbar>

<ion-content>
    <!-- content -->
</ion-content>

每个页面都应导入此组件并将其声明到其 html 页面中。通过使用它，toolbar 不会重叠内容页面，并且可以显示特定的标题。

Answer 3

你能试试这个吗;

<ion-app>
    <ion-header>
        <ion-toolbar>
            <ion-icon name="more" slot="end"></ion-icon>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-router-outlet></ion-router-outlet>
    </ion-content>
</ion-app>

我的 ion-content 与 Ionic 4 中的 header 重叠

My ion-content is overlapping with the header in Ionic 4

ionic-framework

angular

ionic4