ionic-team / ionic-team/ionic-framework

feat(searchbar): collapse on focus

Aperta
#21,465 2 commenti 7 reazioni 0 assegnatari Vedi su GitHub
package: core type: feature request
Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
1g 15h
PR unite (30g)
51

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.