3. Adding hambuger menu trigger to the CLI splitter template starter

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Adding hambuger menu trigger to the CLI splitter template starter

  • I
     

    ➜  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() {}
}
    0 1 Reply
  • 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.

    0