Ionic 2 Open Page in Fullscreen, Hide NavBar and Swipe Down to Show Navbar and Close Fullscreen?

Ionic Framework ionic-v3
1

Hello,
does anyone have an Idea of how i could opne a Page in Fullscreen mode, the Hide the Navbar so the app is in Fullscreen Mode with only the ion-content. And then if the user swipe down the Page closes the Fullscreen and go back to the normal Layout and Show the NavBar again so the User can go back with the NavButton?

If you cant imagine what i mean here is an example:
Something like Youtube does when you click on a Video. But without that resize effect youtube have. I want to only switch from normal Window to fullscreen and back again and in fullscreen the Navbar should gone away :slight_smile:

Thanks for any help!

2

Swipe down is going to be an issue because Ionic doesn’t support that out of the box, only horizontal swiping, so you’d have to do your own thing for that.

Regarding changing layouts to not have the navbar, that part is pretty simple. I actually have a couple tutorials on using different UI layouts. The one I think that applies to you is the auth screen one, which in my example hides the menu for user login, but the flow sounds like the same as what you want. I also have a generic multi-layout tutorial. Between those I think you’ll be good:


1 Like
3

Ok so if swipe down isnt a thing at the moment is there any workaround?
Lets say the Page gets opened in fullscreen, the navbar gets hided.
So now the user want to go back. He clicks on the screen. No matter where and the the Screen closes Fullscreen and show the Navbar again.

Is there any way like to trigger a function to hide/show the navbar with a click on the screen?

I know hiding and showing the navbar is simple. The problem here is to trigger that on the right time. In my case swipe down or something. Like in the youtube app it opens in fullscreen and if you click in the video the navbar with the backbutton gets back showed yagain.

Thanks for your tutorials ill looking into them to eventually find something that helps in my case.

EDIT:
First i found a little code line in your app.component.ts. Can you explain me what animate:flase does.
It has nothing to do with what i want but im only wondering:

  ngOnInit() {
    this.nav.push(MenuComponent, { animate: false });
  }
4

It just makes it appear instantly instead of sliding in. As I recall that’s because the default nav is always an empty page, so when the first real page actually loads I don’t want it to slide in.

You can use a tap instead of swipe for sure.

5

And how could i use Tab? In an example?