ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

feat: collapse toolbars on scroll

Open snimavat opened this issue 2 years ago • 1 comments

Prequisites

Describe the Feature Request

Provide ability to hide ion-header (Appbar) on scroll

Describe the Use Case

Given the very limited screen space available on mobile devices, hiding header / appbar on scroll has become a standard feature for lot of apps. Its common across major popular apps.

We have a video list screen, and need to hide the top header along with back button and search bar on scroll.

Describe Preferred Solution

Ion-header which supports hide on scroll.

Most of good mobile component libraries comes with the ability, be it vuetify or Framework7

This is so common, that many apps end up developing their own solutions, which are some times not as performant or smooth. Many developers have asked the solutions on ionic forums and stackoverflow about how to implement this. and many end up doing it in poor then ideal way

This is one of the must have feature for a rich mobile UI component library.

Describe Alternatives

None. Need to manually implement by listening scroll events.

Related Code

No response

Additional Information

No response

snimavat avatar Aug 25 '21 11:08 snimavat

This could also be applied to ion-tabs when places on the bottom of the screen. This could be a great way to focus more on content on smaller devices.

Mdemol avatar Jan 24 '24 14:01 Mdemol