时间戳

首页 > 解决方案 > 更改侧边菜单背景颜色 ionic 4

angular - 更改侧边菜单背景颜色 ionic 4

问题描述

尝试在我的 ionic 4 项目中更改侧面滑动菜单背景的颜色

这是我的代码：

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar color="medium">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content background = "medium">
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

它只会改变ion-toolbar背景颜色，这是它的外观

在此处输入图像描述

标签： angularionic-frameworkionic4

解决方案

要在 ionic 4 中执行此操作，您必须添加到页面 css（或 scss）文件

ion-menu{
      ion-content{
          --ion-background-color:#color
      }
}

由于菜单很可能在 app.component.html 上，您可能没有为其生成 css 文件，在这种情况下，您可以通过在 app.component.ts 使用

@Component({
     selector: 'app-root',
     templateUrl //,
     stykeUrls :['yourstyles.scss']
})

推荐阅读