web-dev-qa-db-fra.com

Ionic 4 transparent transparent header

J'ai une application Ionic 4 et je veux un en-tête transparent. La documentation Ionic indique que "plein écran" doit être ajouté au contenu ionique, et que 'translucide' doit être ajouté à la barre d'outils ionique.

Cela ne fonctionne pas et laisse toujours la barre d'outils en haut. J'ai également ajouté ceci au CSS:

ion-toolbar {
   --background: transparent;
   --ion-color-base: transparent !important;
}

<ion-header>
  <ion-toolbar translucent >
    <ion-buttons slot="start"  (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen >
</ion-content>

La seule façon que je peux trouver qui réalise l'effet d'un en-tête transparent est quand je vais dans le Shadow DOM dans chrome et ajoute un attribut d'arrière-plan à la classe 'inner-scroll'

Cependant, il n'y a pas de variables associées à la couleur d'arrière-plan dans cette classe et je ne peux donc pas modifier l'arrière-plan à l'aide de cette méthode.

Comment puis-je faire fonctionner cet en-tête/barre d'outils transparent!?

Solution:

pour toute autre personne ayant ce problème - la documentation n'est pas claire du tout. Pour obtenir un en-tête fonctionnel entièrement transparent:

<ion-header>
  <ion-toolbar translucent>
    <ion-back-button></ion-back-button>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen> </ion-content>

Non dans le CSS, ajoutez ce qui suit:

ion-toolbar {
--ion-toolbar-background-color: transparent;
--ion-toolbar-text-color: white;
}

La documentation ne spécifie que le côté HTML des choses mais avec le nouveau DOM Shadow en Ionic, les variables doivent être utilisées pour changer la plupart des styles de composants Ionic.

angularionic-frameworkionic4
4
user3024827

Avez-vous essayé cela?

ion-toolbar {
   --background-color: transparent;
   --ion-color-base: transparent !important;
 }
3
kalemteknoloji

Si vous voulez un en-tête translucide dans ionic 4, vous devez ajouter la propriété "translucide" à la balise d'en-tête, pas à la balise de la barre d'outils.

<ion-header translucent="true">
  <ion-toolbar>
    <ion-title>Toolbar Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
    <!-- content here -->
</ion-content>

Extrait du document ionic doc ... Translucent

Attribut: translucent Type: booléen Si vrai, l'en-tête sera translucide. Remarque: pour faire défiler le contenu derrière l'en-tête, l'attribut plein écran doit être défini sur le contenu. Par défaut, false.

2
chris cooley

Cela a fonctionné pour moi, l'en-tête est transparent mais il y avait encore un espace blanc

ion-toolbar {
  --background-color: transparent;
  --ion-color-base: transparent !important;
}

mais l'utilisation de la barre d'outils ionique à l'intérieur du contenu ionique l'a supprimée du dessus de l'arrière-plan

<ion-content>
  <ion-toolbar slot="fixed">
  </ion-toolbar>
</ion-content>
1
Gabriel Visconti
...    
<ion-toolbar color="translucent"> 
...

et si vous voulez vous débarrasser de l'ombre de la boîte de votre en-tête, vous pouvez le faire dans votre CSS comme:

.header::after {
  background-image: none;
}
1
Gary Großgarten

J'ai eu un problème qui ion-content avait de l'espace en haut et le contenu commençait par en dessous de l'en-tête, donc je l'ai résolu en déplaçant ion-toolbar à mon ion-content et fixe sa position en utilisant slot=fixed:

<ion-content>

  <ion-toolbar slot="fixed">
    ...
  </ion-toolbar>

  ...

</ion-content>

ion-toolbar {
  --background-color: transparent;
  --ion-color-base: transparent !important;
}
0
Sinandro

J'essaye ça et ça marche

Dans variables.scss

ion-toolbar {
  --background: transparent;
  --ion-color-base: transparent !important;
}

Dans la page

<ion-header translucent></ion-header>

<ion-content fullscreen>
    <div class="contenu"></div>
</ion-content>

Je veux également le remarquer dans le fichier .scss. J'ai fait

 .contenu {
     position : absolute; 
     top : 0;
     left : 0;
     height: 100vh;
     width: 100vw;
  }

parce que le contenu était sous l'en-tête

0
Kangudie Muanza - Killmonger

En CSS

.productHeader {
    --background: transparent;
}

HTML ionique

<ion-header no-border>
  <ion-toolbar class="productHeader">
   .
   .
   .
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
  .
  .
  .
</ion-content>

Assurez-vous d'ajouter fullscreen dans ion-content et pour supprimer les ombres qui apparaissent dans l'en-tête, j'ai ajouté no-border

0
Prabhu Anand

Essayez celui-ci
mypage.page.html

<ion-header no-border no-shadow>

  <ion-toolbar color="medium">
    <ion-title>My Page</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">

</ion-content>

Maintenant, changez le fichier variable.scss de couleur moyenne en

--ion-color-medium: #ffffff00;
0
Prashant Gupta

la question concerne ionic 4. vous devez utiliser:

ion-toolbar {
    --background: transparent;
    --ion-toolbar-text-color: white;
}

voir --background utilisé comme dans documents ioniques

0
aboiledtiger