Ionic2自定义侧边菜单应用程序中的工具栏

Question

我正在构建一个带有侧边菜单的Ionic 2应用程序，并希望自定义我的侧边菜单，如下图所示（不完全相同，但重要的部分是如何使用这样的第一个块一张图片和一些文字），整个工具栏的自定义颜色等？：

我的申请如下：

我的app.html：

<ion-menu [content]="content">

  <ion-toolbar>
    <ion-title>Menu</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon name="{{p.name}}"></ion-icon>
        {{p.title}}
      </button>
    </ion-list>
  </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>

Answer 1

您可以只添加一些标准HTML代码，而使用CSS可以自定义样式。在.scss文件中创建CSS Class rules。 Rember要导入 app.core.scss文件中的@import "build/app.html";。您可以找到其他信息来个性化您的应用there

要显示第一个块部分，您可以在菜单ion-list之前和标记<ion-content>之后添加代码。

您可以删除此部分，以便更轻松地创建自定义布局。 <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar>

代码将是：

<ion-menu [content]="content">

  <ion-content>
      <!--Here you can add all the code 
      you want, so you can display whatever you want-->

     <!--Menu list--> 
    <ion-list class="menuList">
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="menuButton">
        <ion-icon name="{{p.name}}"></ion-icon>
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

如果您需要更多帮助，请不要犹豫。