我的離子內容與 Ionic 4 中的標題重疊

Question

我在我的 Ionic 4 應用程序中工作，我已經安裝了 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標簽添加填充

您可以在此處檢查任何其他適合您的解決方案離子含量與標題重疊

Answer 2

對於那些不想處理近似 css 樣式的人， @AJT82指出了處理這個問題的正確方法。 通過創建自定義標題組件，您將不必使用任何邊距或填充樣式。 此外，您還可以選擇在特定頁面上顯示自定義標題。

假設我的工具欄需要在我的組件HomePageModule ，我創建了一個子組件toolbar.ts 。 然后我將其導入home.module.ts並將其聲明為home.page.html 。

工具欄.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() {}
}

工具欄.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 {}

主頁.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>