Sticky Header

[benharpers]

This may be fairly difficult to do this, but it might make sense in some apps to have the header bar stay in-place and fade its content as the tabs are swiping. Similar to a back-swipe (on iOS anyway). For example, if you have your apps logo in the middle of the header on all pages and you just want the icons in the header to change from one tab to another, it looks a little raw to have the header moving. Right now it kind of looks like one long bar across all the tabs.

One way to handle it could be with an attribute directive. You could add a certain attribute to any element you want to "stay in-place and fade" instead of sliding. That element would then get an opacity matching the current % of swipe and a negative/positive CSS transform/translateX to move it in the opposite direction of the slide so it appears to not be moving.

[benharpers]

One problem with the attribute directive method is that you would have to add it to every ion-header in the whole app, which wouldn't be hard but it's not ideal. On the plus side, you could add it to any element you wanted this fade effect on.

Another method would be to only slide the ion-content block instead of the whole nav page and have everything else at the top level of the page's dom, like ion-header and ion-footer or anything else, do an opacity transition. I know you currently use a div that is super wide to hold all the pages so it would require some re-working of that.

Ionic already does this effect pretty well with the back swipe from one page to another, perhaps that should be how it works for tabs too.

[ihadeed]

Good ideas.

When I designed this module, my intention was to use it as demonstrated in many Google apps and the Material guidelines here: https://material.io/guidelines/components/tabs.html#tabs-types-of-tabs

As you can see in the guidelines and in some apps, swipeable tabs only change the content of the page, not the header. The page title stays the same across all the tabs since all the tabs belong to the same page/category/...etc.

The ideas you mentioned are worth investigating, it's nice to cover more use cases. Ionic Framework's iOS header animation is possible, but that means there will be more things animating as you swipe through the tabs.

I already find the current animations slow in this module. So, until I figure out a way to increase their performance, I think it's better to not add more animations.

[benharpers]

Thanks. I can make it work as is for now, or maybe move some of the icons down into the page and move the header up out of the tabs.

[kodeine]

would be very useful. also how to make the tabs below the header? like shown in the material design specs?

[kodeine]

@ihadeed any idea when this is coming?

[damonsomu]

Indeed a great plugin and saves a lot of time.

Is it possible to achieve like this?? Check here in scrolling section-> https://material.io/design/components/tabs.html#behavior

You may check while scrolling the content only the HEADER hides and the TABS sticks to the top. Is it possible to achieve the same?? I also tried to use a directive header scroller but not working in super-tabs page.
The code I brought from the below link
ionic-team/ionic-framework#1381 (comment)