Adding hambuger menu trigger to the CLI splitter template starter



  • ➜  monaca create testApp
    ? Choose a category: Onsen UI and Angular 2
    ? Select a template - Press P to see a preview Onsen UI V2 Angular 2 Splitter
    

    First off, I’m a total noob to the js side of the world (php guy here). I’ve been playing with monaca and CLI trying different stuff out but still I’m totally lost.

    I’ve been able to add a page … total struggle to figure out what I needed to copy and paste. UGH

    1. I can’t figure out how the swipe action is being triggered.

    2. More importantly, how do I add a hamburger icon and make it trigger to open the menu like the swipe action does.

    This obviously doesn’t do anythign but through promise errors …

    import {Component} from '@angular/core';
    
    @Component({
      selector: 'ons-page[weather]',
      template: `
        <ons-toolbar>
    
          <div class="left" (click)="menu.open()">
            <ons-toolbar-button>=</ons-toolbar-button>
          </div>
        <div class="right">
          <ons-toolbar-button ng-click="menu.open()" tappable>
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
          <div class="center">
            Weather
          </div>
    
        </ons-toolbar>
    
        <div class="content">
          <p>
            Weather component.
           </p>
        </div>
      `
    })
    export class WeatherPage {
      constructor() {}
    }
    
    
    

  • Onsen UI

    @illuminate3 Looks like you haven’t found the ons-splitter component yet. Have a look here. Don’t forget to add the collapse and swipeable attributes.

    After defining your template you can grab a hold of the ons-splitter-side with something like @ViewChild(OnsSplitterSide) side: OnsSplitterSide; and then use its methods such as side.open(). Hope it helps.


Log in to reply