在Ionic2中更改邊菜單背景和標題顏色

Question

我對Ionic 2非常新，我無法更改我的側邊菜單背景顏色以及我的應用程序的菜單標題顏色。任何幫助感謝！以下是代碼片段和所需結果（圖片）。爲了方便，我編號了要求。另外，如果有人可以幫助實施下拉選項（要求3），這將是非常有幫助的。基本上它會包含一些子列表項。提前致謝！

<ion-menu [content]="content"> 
    <ion-header no-border> 
    <ion-toolbar color = "white"> 


      <ion-title class="titletext" style="display:inline-block" > 
       <div style = "width : 100%; height : 100%; background-color : white"> 
        <div style = "float:left;width:75%"> 
        <h3>MY APP </h3> 
        </div> 
        <div style = "float:right;width:25%"> 
        <img src = "assets/icon/reports.PNG" /> 
       </div> 
       </div> 
      </ion-title> 
      <!--<img src="assets/icon/Wemart_Icon.png" alt="logo" height="40px" width = "40px" > --> 

    </ion-toolbar> 
    </ion-header> 

<ion-content> 
    <div style = "color : #3DBCC0; width:100%; height : 100%"> 
    <ion-list> 

     <!--<button menuClose ion-item *ngFor="let p of myPages" (click)="openPage(p)"> 
     <span text-color="my-custom-color2">{{p.title}}</span> 
     </button>--> 

     <button ion-item> 
      <ion-icon name="home" item-left></ion-icon> HOME 
     </button> 

     <button ion-item> 
      <ion-icon name="home" item-left></ion-icon> PORTFOLIO ANALYTICS 
     </button> 

     <button ion-item> 
      <ion-icon name="home" item-left></ion-icon> EXPENSES 
     </button> 

     <button ion-item> 
      <ion-icon name="home" item-left></ion-icon> UTILITY ANALYTICS 
     </button> 

     <button ion-item> 
      <ion-icon name="home" item-left></ion-icon> TERMS OF USE 
     </button> 

     <button ion-item> 
      <ion-icon name="home" item-left></ion-icon> SIGN OUT 
     </button> 

    </ion-list> 
    </div> 
    </ion-content> 

</ion-menu> 

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --> 
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

我加入以下代碼variables.scss：

// Ionic Variables and Theming. For more info, please see: 
// http://ionicframework.com/docs/v2/theming/ 
$font-path: "../assets/fonts"; 

@import "ionic.globals"; 


// Shared Variables 
// -------------------------------------------------- 
// To customize the look and feel of this app, you can override 
// the Sass variables found in Ionic's source scss files. 
// To view all the possible Ionic variables, see: 
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/ 

$toolbar-background: white; 
$toolbar-wp-title-text-align : left; 

// Named Color Variables 
// -------------------------------------------------- 
// Named colors makes it easy to reuse colors on various components. 
// It's highly recommended to change the default colors 
// to match your app's branding. Ionic uses a Sass map of 
// colors so you can add, rename and remove colors as needed. 
// The "primary" color is the only required color in the map. 

$colors: (
    primary: #387ef5, 
    secondary: #32db64, 
    danger:  #f53d3d, 
    light:  #f4f4f4, 
    dark:  #222, 
    color1 : #8FAADC, 
    color2 : #DAE3F3, 
    color3: #3DBCC0 
); 

// App iOS Variables 
// -------------------------------------------------- 
// iOS only Sass variables can go here 




// App Material Design Variables 
// -------------------------------------------------- 
// Material Design only Sass variables can go here 




// App Windows Variables 
// -------------------------------------------------- 
// Windows only Sass variables can go here 




// App Theme 
// -------------------------------------------------- 
// Ionic apps can have different themes applied, which can 
// then be future customized. This import comes last 
// so that the above variables are used and Ionic's 
// default are overridden. 

@import "ionic.theme.default"; 


// Ionicons 
// -------------------------------------------------- 
// The premium icon font for Ionic. For more info, please see: 
// http://ionicframework.com/docs/v2/ionicons/ 

@import "ionic.ionicons"; 


// Fonts 
// -------------------------------------------------- 

@import "roboto"; 
@import "noto-sans"; 

Answer 1

爲了給背景色swidemenu你必須打開app.css和複製粘貼下面的代碼。基本上離子菜單有一個像頁面一樣的內容塊。所以你要更改網頁的背景顏色（sidemenu）

ion-menu{ 
ion-content{ 
    background-color:red !important; 
} 
} 

Answer 2

<ion-toolbar yourcolorname> 

如果在SCSS聲明一種顏色像你一樣顏色1，顏色2等做了然後你就可以用你的顏色，如上面的例子。

Answer 3

您可以創建div作爲內<ion-content> 以下<ion-list>頭。然後將樣式應用於header，並相應地應用<ion-list>。

<ion-menu [content]="content"> 
    <ion-content> 
    <!--Menu Header--> 
    <div> 
    ........ 
    </div> 

    <!--Menu list--> 
    <ion-list> 
    </ion-list> 

    </ion-content> 
</ion-menu> 

然後在每個需要toolbar頁ion-navbar。

<ion-header no-border> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    </ion-navbar> 
</ion-header> 

現在，你的下一個要求是嵌套菜單

// Menu model 
export interface MenuOptionModel { 
    iconName: string; 
    displayName: string; 
    component: any; 
    subItems?: Array<MenuOptionModel>; 
} 

export class MyApp { 

showSubmenu: boolean = false; 
options: any[]; 

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

getMenuOptions() { 
    this.options = new Array<MenuOptionModel>() 
    // Load simple menu options 
    // ------------------------------------------ 

    this.options.push({ 
     iconName: 'icon_home', 
     displayName: 'HOME', 
     component: HomePage 
    }); 

    this.options.push({ 
     iconName: 'icon_settings', 
     displayName: 'Expenses', 
     component: null, 
     subItems: [ 
     { 
      displayName: 'Exp 1', 
      component: Exp1Page 
     }, 
     { 
      displayName: 'Exp 2', 
      component: Exp2Page 
     } 
     ] 
    }); 

} 

menuItemHandler() { 
    this.showSubmenu = !this.showSubmenu; 
} 

菜單模板頁

<ion-list> 

     <div *ngFor="let option of options"> 

     <button menuClose ion-item *ngIf="!option.subItems" class="menu-style" (click)="openPage(option)"> 
      <ion-label text-wrap mode="md" > 
      <ion-icon [name]="option.iconName" aria-hidden="true" role="presentation" item-left></ion-icon> 
      {{ option.displayName }} 
      </ion-label> 
     </button> 

     <div *ngIf="option.subItems && option.subItems.length > 0" class="div-sub-item"> 
      <button ion-item (click)="menuItemHandler()"> 
      <ion-label text-wrap mode="md"> 
       <ion-icon [name]="option.iconName" aria-hidden="true" role="presentation" item-left></ion-icon> 
       {{ option.displayName }} 
      </ion-label> 
      <ion-icon name="icon_down" aria-hidden="true" role="presentation" item-right></ion-icon> 
      </button> 
      <div class="settings-menu-divider"> 
      </div> 

      <ion-list mode="md" > 
      <div *ngFor="let item of option.subItems" id="side-nav" mode="md"> 
       <button menuClose ion-item submenu-item class="submenu-style" *ngIf="showSubmenu" (click)="openPage(item)" 
         mode="md"> 
       <ion-label text-wrap mode="md"> 
        <ion-icon name="icon_bullet" aria-hidden="true" role="presentation" 
          item-left ></ion-icon> 
        {{ item.displayName }} 
       </ion-label> 
       </button> 
       <div *ngIf="showSubmenu" class="sub-menu-divider"></div> 
      </div> 
      </ion-list> 
     </div> 
     </div> 
    </ion-list>