How to hide tabs on scrolling?


#1

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


#2

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.


#3

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…


#4

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: https://github.com/driftyco/ionic-ion-header-shrink


#5

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.


#6

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.


#7

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.