ionic-team / ionic-team/ionic-framework
feat(searchbar): collapse on focus
- Ngôn ngữ chính
- TypeScript
- Star
- 52.7k
- Fork
- 13.3k
- Merge trung bình
- 1 ngày 15 giờ
- Pull request đã merge (30 ngày)
- 51
Mô tả
# 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:

## 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.
Hướng dẫn đóng góp
Hướng nghiên cứu
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.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- typescript
- Lĩnh vực
- frontend
- Loại issue
- Tính năng
- Độ khó
- 5/5
- Thời gian dự kiến
- Hơn một tuần
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100