How to hide tabs on scrolling?

How to hide tabs on scrolling & showing it up again on scrolling up? @leob @Gajotres

That’s a pattern that you see on websites but I can’t remember having it ever seen in a mobile app.

Are you sure you’d want such an exotic UI pattern and why would you want that if I may ask?
I don’t really see the advantage of this.

I think that mobile app users aren’t used to apps doing this and to me it sounds more trouble than it’s worth.

If I were you I wouldn’t waste time on this.

Especially on small devices like moto g or iPhone 4, 5 , shrinking header and tabs would give a large area to display contents. So what I thought was, shrinking header & moving tabs to header’s position would be nice. Tabs are necessary in my case since it allows faster transition between states than sidemenus…

There’s such plugin but from my knowledge it’s only usable on list directive, click here.

Demo:

There’s also another one but this one is not actively maintained: GitHub - ionic-team/ionic-ion-header-shrink: A demo of making a header that shrinks based on the user scrolling (like Facebook's iOS app).

1 Like

Yeah tabs make it fast to switch but then hiding them defeats the purpose. They should be always visible/clickable IMO.

I’m also targeting iPhone 4 but the small screen real estate is just a given. Make the views scrollable and then the UX is allright.

Ok cool that it exists but I won’t use it in my app. Only saves 10% on real estate so I don’t really see how it’s useful.

Neither do I, but from time to time, people for some reason what this feature. If you’re missing space you’re doing something wrong.