ionic-team / ionic-team/ionic-framework

feat(searchbar): collapse on focus

Open
#21,465 2 comments 7 reactions 0 assignees View on GitHub
package: core type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.