ionic-team / ionic-team/ionic-framework
feat(searchbar): collapse on focus
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 15 小时
- 30 天内合并 PR
- 51
描述
# Feature Request
**Ionic version:**
[x] **4.x**
**Describe the Feature Request**
In native IOS apps such as settings, photos or reminders, the searchbar is animated when is focused.
- When focused, the header is minimized so that the toolbar is at the top. Components that are above the search bar, such as title or buttons, disappear [step 2].
- while focusing, there is an animation of the cancel button from right to left (Reminder app animation example).
- Furthermore, the content is not scrollable while the searchbar is focused.
- While focused and nothing is typed, there is a backdrop on content.
- If something was typed, the content can be edited again and the backdrop disappears [step 3].
## Settings app example:

## Reminder app animation example:
- [Link to video](https://i.imgur.com/6tFq90O.mp4)
**Describe Preferred Solution**
The ion-searchbar could be extended by further input parameters:
- `collapse: boolean`
- if true, the slide to top animation is executed.
- `backdrop: boolean`
- backdrop on content will be applied, when focused.
贡献指南
调研方向
Start with the ion-searchbar component and review the linked iOS settings and reminders examples to understand the requested focus behavior. Done means defining and implementing the requested collapse and backdrop options, including the focus animation, content scrolling, cancel-button transition, and backdrop states.
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- typescript
- 领域
- frontend
- Issue 类型
- 功能
- 难度
- 5/5
- 预计耗时
- 一周以上
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100