爲整個側面菜單設置漸變背景色

我已經創建了Ionic 3side menu項目。現在我需要爲整個Sidemenu設置漸變背景色。這似乎是一個簡單的任務。但它不起作用。有什麼想法嗎？爲整個側面菜單設置漸變背景色

app.html

<ion-menu [content]="content"> 
    <ion-content class="background-gradient"> 
    <ion-list no-lines> 
     <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="border-none" outline> 
      <ion-icon [name]="p.icon" item-left></ion-icon> {{p.title}} 
     </button> 
    </ion-list> 
    </ion-content> 
</ion-menu>

app.component.ts

@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    @ViewChild(Nav) nav: Nav; 

    rootPage: any = HomePage; 

    pages: Array<{ title: string, component: any, icon: string }>; 

    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) { 
    this.initializeApp(); 

    // used for an example of ngFor and navigation 
    this.pages = [ 
     { title: 'Home', component: HomePage, icon: 'game-controller-b' }, 
     { title: 'Activity', component: '', icon: 'browsers' }, 
     { title: 'Contacts', component: '', icon: 'play' }, 
     { title: 'Add Project', component: '', icon: 'settings' }, 
     { title: 'Settings', component: '', icon: 'settings' } 
    ]; 

    }

app.scss

.background-gradient { 
    background: -webkit-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%); 
} 

.border-none { 
    border: none; 
    }

看起來象是丁字褲他現在：

問：你能告訴我如何添加gradient background color到menu items嗎？即整個side menu。我已經嘗試了許多ways.But沒有運氣尚未:(

來源

2017-09-01 Sampath

添加了菜單項的背景透明解決了這個：

.border-none{ 
    border: none; 
    background: transparent; 
}

來源

2017-09-01 11:25:17 rebecca

爲整個側面菜單設置漸變背景色

回答

相關問題