ionic-team / ionic-team/ionic-framework

feat(searchbar): collapse on focus

Ouverte
#21,465 2 commentaires 7 réactions 0 personnes assignées Voir sur GitHub
package: core type: feature request
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
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.

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.