如何自定義ionic 4側面菜單？

Question

我在嘗試自定義離子自動生成的側面菜單時遇到麻煩。

側面菜單位於“ 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”等更改樣式，並且如果我將其放置在每個元素上都可以使用，但是我想知道是否有一些更簡便有效的自定義方式側面菜單。

謝謝團隊！

Answer 1

  <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;

}

Answer 2

您需要了解的第一件事是離子'< 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