CODEWITHSUNDEEP
javascriptcssnode.jsvue.jsionic-framework
Lucas Van Vooren
Lucas Van Vooren

Reputation: 1

I tried to change the CSS of an Ionic element

I'm trying to learn Ionic with Vue.js. I want to do something simple: just change the background color, but it doesn't work. I don't found good documentation explaining how can i do that

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="header">
        <img class="icon" src="/icon.svg"/>
        <ion-title class="title">Name</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 1</ion-title>
        </ion-toolbar>
      </ion-header>

      <ExploreContainer name="Tab 1 page" />
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
</script>

<style>
  .icon {
    width: 4rem;
    height: auto;
    margin-right: 8px;
  }

  ion-header {
    background-color: red;
  }
</style>

thanks

Upvotes: 0

Views: 55

Answers (1)

Utsav Sheta
Utsav Sheta

Reputation: 177

You can try below steps to change background color of header.

NOTE:

  • If you need to change any single header color then you need to put below code in that single script tag with scoped property.
  • If you do same color for all header than you need to put below code in script tag without scoped property of app.component.
// for mobile
.header-collapse-condense ion-toolbar{
  --background : red 
}

// for web 
ion-toolbar {
    --background: red;
}

Upvotes: -1

Related Questions