Question

我正在使用Ionic 4 App，并且已经安装了Ionic 4选项卡主题，并且通过在 app.component.html 中添加标题代码来使标题通用。但是问题是我的头与标题重叠。

这是我的 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指出了解决此问题的正确方法。通过创建自定义标题组件，您将不必使用任何边距或填充样式。另外，您可以选择在特定页面上显示自定义标题。

假设工具栏需要位于组件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
然后，使用home参数在title模板中声明它：

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

我的离子含量与Ionic 4中的标头重叠

3 个答案: