1

I'm building a mobile app in ionic and I wanna make a slack-like side menu by placing slides.

For example, when you click on main menu item, it will slide out another slide in the sidemenu as slack does.

I tried to use ion-slides in ion-menu but slides is not working.

Check out the screenshot, please.

enter image description here

Here is the code snippet.

<ion-menu [content]="mycontent" [swipeEnabled]="false">
    <ion-content>

      <ion-slides>
        <ion-slide>
          <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>

  </ion-content>

</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

Here is what I'm trying to build.

enter image description here

Any thoughts on how to implement this?

Thanks.

Patrick Blind
  • 399
  • 1
  • 4
  • 15

1 Answers1

0

The ion-slides component makes use of the Swiper library under the hood. Part of the init code for Swiper depends on knowing the width of the slide container, and the code uses clientWidth to get it. Since the menu starts out with display:none, the retrieved width is always zero and the init code bails on you.

You can get around this by temporarily setting display:block while Swiper initializes. I have my side menu inside of a component, so you may need to adjust this code to your situation:

app.html:

<sidebar [content]="content"></sidebar>
<ion-nav #content [root]="rootPage" swipeBackEnabled="false"></ion-nav>

sidebar.html:

<ion-menu [content]="content" swipeEnabled="false">
  <ion-content>
    <ion-slides pager>
      <ion-slide>
        <h2>Slide 1</h2>
      </ion-slide>
      <ion-slide>
        <h2>Slide 2</h2>
      </ion-slide>
      <ion-slide>
        <h2>Slide 3</h2>
      </ion-slide>
    </ion-slides>
  </ion-content>
</ion-menu>

sidebar.component.ts:

...
@Component({
  selector: 'sidebar',
  templateUrl: 'sidebar.html',
})
export class SidebarComponent implements AfterViewInit {
  @Input('content') content: NavController;

  @ViewChild(Slides) slides: Slides;
  @ViewChild(Menu, { read: ElementRef }) menuRef: ElementRef;

  // Use Renderer2 instead of direct DOM manipulation through the
  // ElementRef.nativeElement.
  //
  // @see: https://medium.com/@kmathy/angular-manipulate-properly-the-dom-with-renderer-16a756508cba
  //
  constructor(private renderer: Renderer2) {
  }

  // ViewChild template references might not be available until
  // AfterViewInit lifecycle hook runs.
  //
  // @see: https://blog.angular-university.io/angular-viewchild/
  //
  ngAfterViewInit() {
    this.renderer.setStyle(this.menuRef.nativeElement, 'display', 'block');
    setTimeout(() => {
      // Swiper init has its own ngAfterViewInit code that delays 300ms
      // before running. Don't remove the 'display' style until after that.
      this.renderer.removeStyle(this.menuRef.nativeElement, 'display');
    }, 310);
  }

}
Brownoxford
  • 51
  • 1
  • 2