ionic-team / ionic-team/ionic-framework

feat(searchbar): collapse on focus

未关闭
#21,465 2 条评论 7 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: feature request
主要语言
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:

![image](https://i.imgur.com/L29Iyfj.jpg)

## 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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。