Question

尝试在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背景颜色，这就是它的外观

Answer 1

要在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']
})

Answer 2

Ranika Nisal's answer如果背景有些不透明，将无法正常工作；离子菜单后面还有另一个白色背景。要在整个侧面菜单上实现不透明度，我必须使用以下代码：

ion-split-pane{ 
    --border: none !important;
    ion-menu{
     --background: rgba(0,0,0,.3) !important; 
        ion-content{            
            --background: transparent !important; 
            ion-list-header{ 
                --background: transparent !important;
                --color: #FFFFFF !important;   
            }
            ion-list {
                background: transparent !important;
            }
            ion-item{
                --background: transparent !important;
                 --color: #FFFFFF !important;
                 ion-icon{ padding-right: 10px !important; }
            }
        }
    }
}

更改侧面菜单背景色离子4

2 个答案: