ionic-team / ionic-team/ionic-framework
feat: collapse toolbars on scroll
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 15 小时
- 30 天内合并 PR
- 51
描述
### Prequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.
### 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](https://vuetifyjs.com/en/components/app-bars/) or [Framework7](https://v1.framework7.io/docs/hide-bars-on-scroll.html)
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_
贡献指南
调研方向
Start with the ion-header component entry point and review how scrolling is currently handled, using the issue’s manual scroll-listener approach as context. Clarify the collapse and restore behavior for the video-list use case; done means the header, back button, and search bar can hide on scroll without each app needing its own implementation.
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- typescript
- 领域
- frontend, mobile
- Issue 类型
- 功能
- 难度
- 5/5
- 预计耗时
- 一周以上
- 活跃度
- 停滞
- 描述清晰度
- 需要澄清
- 新手友好度
- 30/100