Question

我正在创建ionic 4应用程序。使用“标签”组件显示3个标签。离子选项卡组件的默认颜色是蓝色。默认的背景颜色是白色。我想更改并选择其他背景颜色。

要添加的文档报价：

:root {
  --ion-tab-bar-background: red; // or some other color
}

它对我不起作用。我也尝试在ionic 4应用程序的主题文件夹中修改variables.scss 这对我也没有用。我还阅读了SOF中的其他帖子，但没有成功或与ionic 4相关例如，这篇文章：How to change the background color of tab bar and tab icon in Ionic 4提供了不适用于我的解决方案

我的基本模板：

<ion-tabs main color="primary">
  <ion-tab-bar slot="top" >
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>tab1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>tab2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>tab3</ion-label>
    </ion-tab-button>
 </ion-tab-bar>
</ion-tabs>


<ion-header>
  <ion-toolbar>
    <ion-title>
      home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-card class="welcome-card">
      <ion-img src="./../../assets/background-for-baby-picture.jpg"></ion-img>
      <ion-card-header>
        <ion-card-subtitle>guide</ion-card-subtitle>
       <ion-card-title>welcome</ion-card-title>
     </ion-card-header>
      <ion-card-content>
        <p>info </p>
      </ion-card-content>
    </ion-card>
   <ion-list lines="none">
     <ion-list-header>   
  </ion-list-header> 
</ion-list>
</ion-content>

如何更改离子4标签组件的背景色

0 个答案: