admin管理员组

文章数量:1418099

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

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

  • javascript
  • css
  • node.js
  • vue.js
  • ionic-framework
Share Improve this question asked Jan 29 at 19:08 Lucas Van VoorenLucas Van Vooren 1 1
  • 3 try <style scoped> – muhfred Commented Jan 29 at 21:48
Add a comment  | 

1 Answer 1

Reset to default -1

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 appponent.
// for mobile
.header-collapse-condense ion-toolbar{
  --background : red 
}

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

本文标签： javascriptI tried to change the CSS of an Ionic elementStack Overflow

版权声明：本文标题：javascript - I tried to change the CSS of an Ionic element - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745282469a2651503.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。