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

3 回答

• 0

  为了给swidemenu提供背景颜色，你必须打开app.css并复制粘贴下面的代码 . 离子菜单基本上就像页面一样有内容块 . 所以你必须改变那个页面的背景颜色（sidemenu）

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

  回复于 2024-05-19T03:02:15+08:00
• 1

  <ion-toolbar yourcolorname>
  

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

  回复于 2024-05-19T03:02:15+08:00
• 0

  您可以在<ion-content>中的<ion-list>之后创建div作为 Headers . 然后将样式应用于 Headers ，并相应地应用于<ion-list> .

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

  然后在每个页面中都有离子导航栏，你需要工具栏 .

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

  回复于 2024-05-19T03:02:15+08:00