如何自定义 ionic 4 侧边菜单？答案

【问题标题】：How to customize ionic 4 sidemenu?如何自定义 ionic 4 侧边菜单？
【发布时间】：2019-10-09 09:22:20
【问题描述】：

我在尝试自定义 ionic 自动生成的侧边菜单时遇到了麻烦。

侧边菜单位于“app.component.html”，如下所示：

 <ion-app>


    <ion-menu contentId="content1" side="start" >
      <ion-header >
        <ion-toolbar >
          <ion-avatar>
            <img [src]="image">
          </ion-avatar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>



      <ion-content >
        <ion-list >
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
              <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 id="content1" main ></ion-router-outlet>

</ion-app>

我尝试使用属性“style:background-color:#000000”等来更改样式，如果我把它放在每个元素上它就可以工作，但我想知道是否有一些更简单有效的方法自定义侧边菜单的方法。

感谢团队！

【问题讨论】：

标签： css angular ionic-framework

【解决方案1】：

您需要知道的第一件事是在 ionic 'ion-content>' 中，'ion-list>' 是指令。您可以使用 css 操作这些指令的模板设计。

例如。

在 HTML 中-

<div class="side-nav-menu"> <!--wrap side menu in div tag and give class to it-->
<ion-content >
    <ion-list >
       <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
          <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                 {{p.title}}
              </ion-label>
          </ion-item>
        </ion-menu-toggle>
    </ion-list>
</ion-content>
</div>

在应用程序的全局 css 文件中，即 app.scss

.side-nav-menu{
    //add style if you want any...for eg border, shadow.etc
}
.side-nav-menu .ion-item{
    //style for ion-item    
}

注意：- 请记住指令（属性）名称也是同一指令的类名。例如。如果指令名称是 ion-item 并且您想向该指令添加自定义 css，则必须使用全局 scss 文件中的 .ion-item 类添加 css

【讨论】：

【解决方案2】：

  <ion-content class="abc">

      </ion-content>

使用内容类以这种方式更改背景

  .abc {

    --background: var(--ion-background-color,linear-gradient(to  left,#E67D22, #1C4577)) !important;

}

或者只使用颜色而不是渐变

   .abc {

    --background: var(--ion-background-color,red) !important;

}

【讨论】：