6
votes

Mon contenu ionique chevauche celui de l'en-tête dans Ionic 4

Je travaille dans mon application Ionic 4 et j'ai installé le thème de l'onglet Ionic 4 et j'ai rendu l'en-tête commun en ajoutant le code d'en-tête dans app.component.html, mais le problème est que mon chevauchement avec l'en-tête.

Ceci est mon app.component.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>

Ceci est mon tab1.page.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>

Je viens d'installer le nouveau thème des onglets dans Ionic 4 et j'ai fait ces changements uniquement.

Toute aide est très appréciée.

C'est mon StackBlitz

angular ionic-framework ionic4

2 commentaires

La définition d'un en-tête commun est ce que l'équipe ionique ne veut pas que vous fassiez, un en-tête est destiné à être sur chaque page. Vous pouvez vous simplifier la vie un peu et créer un composant d'en-tête personnalisé, que vous ajouterez simplement en haut de vos pages comme: <my-custom-header></my-custom-header>

@ AJT_82. J'ai ajouté le my stackblitz. Pouvez-vous s'il vous plaît ajouter le composant à cela?

3 Réponses :

3
votes

Pour éviter le chevauchement du ion-content vous devez ajouter un style au ion-content

<ion-content padding>

</ion-content>

Vous pouvez essayer la méthode ci-dessus ou essayer si cela fonctionne.

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

.content{
 margin-top: 50px;
}

Ajouter un remplissage à la balise de ion-content

Vous pouvez vérifier toute autre solution qui vous convient ici chevauche le contenu ionique avec l'en-tête

10 commentaires

Quand j'ajoute la classe à la teneur en ions et donne la marge, cela ne prend pas la marge.

Donc, il est normal de définir le code d'en-tête dans app.component.html pour le rendre commun.

ajouter un remplissage au ion-content et vérifier si cela fonctionne

si vous avez besoin de l'en-tête pour toutes les pages, il est préférable de les mettre dans le app.component.html sinon si vous avez besoin de pages spécifiques, vous pouvez les mettre dans votre page

J'ai ajouté dans le app.component.html uniquement et j'ai ajouté l'image de DOM. Peux tu vérifier s'il te plaît.

Continuons cette discussion en chat .

Avez-vous une solution?

Pouvez-vous vérifier mon StackBlitz?

avez-vous trouvé une solution @Raghav? Je suis confronté au même problème et je ne veux pas me fier au rembourrage ou à la marge.

Salut @Divya. Je pense que cela peut vous aider.

1
votes

Pour ceux qui ne veulent pas traiter des styles css approximatifs, @ AJT82 a indiqué la bonne façon de gérer cela. En créant un composant d'en-tête personnalisé, vous n'aurez pas à utiliser de styles de marge ou de remplissage. De plus, vous aurez le choix d'afficher un titre personnalisé sur une page spécifique.

En supposant que ma barre d'outils doit être sur mon composant HomePageModule , j'ai créé un sous-composant toolbar.ts . Ensuite, je l'importe dans home.module.ts et le déclare dans home.page.html .

toolbar.ts
en utilisant Input pour récupérer le paramètre de title partir de html:

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

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

toolbar.html
afficher le title reçu du module:

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

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

home.module.ts
importer le module de la toolbar d' toolbar :

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

home.page.html
puis, déclarez-le dans le modèle d' home avec le paramètre 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() {}
}

Chaque page doit importer ce composant et le déclarer dans sa page html. En utilisant cela, la toolbar ne chevauche pas la page de contenu et peut afficher un titre spécifique.

0 commentaires

1
votes

Pourriez-vous essayer ceci;

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

0 commentaires