3
Ionic 3
side menu
プロジェクトを作成しました。今私はサイドメニュー全体にグラデーションの背景色を設定する必要があります。それは簡単なことです。しかし、うまくいきません。サイドメニュー全体にグラデーションの背景色を設定します
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;
}
それはトンのようになります。彼の今:
Q:あなたもmenu items
にgradient background color
を追加する方法を教えてもらえますか?全体がside menu
である。私は多くのways.Butメニュー項目の透明な背景を追加していない、まだ運:(