ionic-team / ionic-team/ionic-framework

feat: Dynamic breakpoints for Sheet Modals

Đang mở
#25,025 10 bình luận 19 reaction 0 người được giao Xem trên GitHub
package: core type: feature request
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 14 giờ
Pull request đã merge (30 ngày)
50

Mô tả

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

Sheet modals can have dynamic content within their container. When the content changes, the height of the sheet modal can also change. Sheet modals should offer the ability to the developer, to update the breakpoint values dynamically, so that the sheet modal will both animate to the updated height smoothly as well as the clip point for the breakpoint will respond to the updated height.

### Describe the Use Case

Twitter spaces highlights this example perfectly.

|Initial Breakpoint|Max Breakpoint|
|---|---|
|| |

When the number of participants in a Twitter space increases, the height of the modal will also increase, changing the breakpoint value:

|Updated Breakpoint|Max Breakpoint|
|---|---|
|||

### Describe Preferred Solution

Dynamic breakpoints should happen automatically, with limited customization from the implementer. For example:

```html

```

```ts
breakpoints = [0, 0.25];

onClick() {
this.breakpoints = [0, 0.5];
}
```

Developers should be able to update the value of `breakpoints` at any point once the sheet modal is presented and the sheet modal should respond and update accordingly.

### Describe Alternatives

Other options have been explored here: https://github.com/sean-perkins/modal-sheet-hans

1. Presenting a new sheet modal when the state changes. Functional, but the transition between dismissing the previous sheet modal and presenting the new sheet modal is noticeable and not ideal.
2. Dynamically changing the height of the modal. Displays similarly, but does not transition between height changes. Also the gesture behavior responds incorrectly.

### Related Code

Supporting this internally will require changes similar to: https://github.com/ionic-team/ionic-framework/commit/f08456700246e7b14ef9eb2354bfdd9499a76d74

We will need to safeguard against instances where:
- The current breakpoint is no longer in the list of available breakpoints
- The sheet gesture needs to be re-created as a result of the breakpoints being modified

### Additional Information

Duplicate feature request as: #24752, with updated use case.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng việc xem xét các thay đổi triển khai được tham chiếu bởi commit f08456700246e7b14ef9eb2354bfdd9499a76d74 và so sánh yêu cầu này với Duplicate Issue #24752. Theo dõi các cập nhật breakpoint và việc tạo sheet gesture, sau đó xác minh rằng việc thay đổi breakpoint sau presentation sẽ tạo hiệu ứng động đến chiều cao mới, xử lý breakpoint hiện tại đã bị xóa và tạo lại gesture khi cần.

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
25/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.