I have an Ionic 4 / Capacitor.js / Vue.js app and am trying to set a transparent header.
I’m using these versions
"@capacitor/android": "^1.0.0-beta.17",
"@capacitor/cli": "^1.0.0-beta.17",
"@capacitor/core": "^1.0.0-beta.17",
"@capacitor/ios": "^1.0.0-beta.17",
"@ionic/core": "^4.0.1",
"@ionic/vue": "0.0.1",
What happens is when I set the translucent prop on the <ion-header> tag like this
<ion-header translucent="true" no-border>
save, then let it hot reload, the header shows up as transparent as I would expect. But navigating away and then back, or reloading the browser, and the header reappears.
subsequent reloads and the header reappears as white
The component in question is below. If it helps, this component is inside an <ion-tab> within an <ion-tabs>. I’ve also tried using the vue syntax of :translucent="true" to no avail. Also this behaviour is present in web browser and android emulator. I’ve tried everything in the documentation but the fact that it works pre-reload and then fails after leads me to believe there is a bug here. If not, has anyone an example of transparent headers working within vue? The solutions I have found are either angular related or extremely hacky for something that should be as simple as setting a prop
<template>
<div>
<ion-header translucent="true" no-border>
<ion-toolbar>
<ion-buttons>
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content fullscreen text-center>
<div class="content-secondary">
<ion-card color="light">
<ion-card-header>
<ion-text class="card-title-top">YOUR</ion-text>
<ion-text class="card-title-bottom">DASHBOARD</ion-text>
</ion-card-header>
<ion-card-content>
<p style="">Welcome to your Stirfry Republic Member Dashboard!</p>
<p style="">You currently have {{ formatRewardText }}</p>
<Modal :item="rewards" modalComponent="rewards" >
<ion-text slot="modalcontent" color="primary" style="">Rewards: Use unique codes to get discounts and free stuff.</ion-text>
</Modal>
<Modal :item="points" modalComponent="points">
<ion-text slot="modalcontent" color="primary" style="">Points: Get points for the dollars you spend on meals.</ion-text>
</Modal>
<ion-text>Everything here is fresh and prepared in-house (we do all our own software development), so if you find a bug, <a href="#" @click="share">send us an email</a>!</ion-text>
</ion-card-content>
</ion-card>
</div>
</ion-content>
</div>
</template>
<style scoped>
ion-content {
--background: url('../assets/hero-bg-02-min.jpg') no-repeat center center / cover;
}
ion-toolbar {
--background: transparent !important;
--ion-color-base: transparent !important;
}
</style>