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）

cv::FileStorage right_fs("right_calibration.xml", cv::FileStorage::WRITE);
right_fs << "cameraMatrix" << right_camera_matrix;
right_fs.release();

Answer 2

<ion-toolbar yourcolorname>

如果你在scss中声明颜色，就像你使用color1，color2等那样。然后你就可以像上面的例子一样使用你的颜色了。

Answer 3

您可以在div中的<ion-list>后面标题<ion-content>创建。然后将样式应用于header，并相应地应用于<ion-list>。

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

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

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

然后在您需要的每个页面中ion-navbar toolbar。

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

在Ionic2中更改侧菜单背景和标题颜色

3 个答案: