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