ionic-team / ionic-team/ionic-framework

feat(searchbar): collapse on focus

Offen
#21,465 2 Kommentare 7 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
package: core type: feature request
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.